文本输入不为空时启用表单提交按钮的最简单方法答案

【问题标题】：The simplest way to enable form submit button when text input is not empty文本输入不为空时启用表单提交按钮的最简单方法
【发布时间】：2019-02-06 17:30:05
【问题描述】：

我想禁用submit 按钮，直到所有文本inputs 都被填满。我下面的代码示例不起作用。

实现这一目标的最简单和最惯用的方法是什么，我缺少什么？

const form = document.forms[0]
const inputs = form.querySelector("fieldset > *")
const submit = form.querySelector("[type=submit]")

inputs.addEventListener("change", () => {
  if (!inputs.length) {
    submit.disabled = true
  } else {
    submit.disabled = false
  }
})

<form>
  <fieldset>
    <input type="text" placeholder="John Doe" id="name"><br>
    <input type="email" placeholder="john@example.com" id="email"><br>
    <textarea placeholder="Lorem ipsum dolor sit amet." id="message"></textarea>
  </fieldset>

  <input type="submit" value="Submit">
</form>

我知道 Stack Overflow 上有很多关于此的问题和答案，但大多数都是不必要的复杂。

【问题讨论】：

您必须监听每个输入的变化，然后在发生变化时遍历输入以查看它们是否具有值，然后执行 if/else。
@FunkDoc 所以我应该从inputs.forEach(input => {开始？
或者只使用HTML5资源，给每个标签添加“required”属性。
@FabioManzano 我知道required 属性，但在这种情况下，我需要禁用submit 按钮，直到文本inputs 被填满。
您可以使用 oninput 触发一个通过输入 w3schools.com/jsref/event_oninput.asp 的函数

标签： javascript html forms ecmascript-6

【解决方案1】：

可能与其他解决方案类似，我在 JSFiddle 中对此进行了测试，因此我知道它至少可以工作。

const form = document.forms[0];
const inputs = form.querySelectorAll("fieldset > input, fieldset > textarea");
const submit = form.querySelector("[type=submit]");

for (i in inputs) {
    var _input = inputs[i];

    if (typeof _input == 'object') {
    _input.addEventListener("change", () => {
      submit.disabled = false;

      for (i in inputs) {
        var _input = inputs[i];

        if (typeof _input == 'object') {
          if (_input.value == '') {
            submit.disabled = true;
            break;
          }
        }
      }
    });
  }
}

https://jsfiddle.net/un1m5jgq/13/

【讨论】：

【解决方案2】：

您可以创建一个函数来检查输入是否为空。然后将该函数作为表单输入的回调。

编辑：

如果您有一个输入数组，您可以使用 for 循环并替换所有单独的输入变量。

let form = document.forms[0]
let nameInp = document.getElementById('name');
let emailInp = document.getElementById('email');
let messageInp = document.getElementById('message');

let submit = form.querySelector("[type=submit]")

function checkInputs() {
  if (nameInp.value != "" && emailInp.value != "" && messageInp.value != "") {
    
    submit.disabled = false;
    
  } else if(!(nameInp.value != "" && emailInp.value != "" && messageInp.value != "")){
    
    submit.disabled = true;
    
  }
}

nameInp.addEventListener("change",checkInputs);
emailInp.addEventListener("change",checkInputs);
messageInp.addEventListener("change",checkInputs);

<form>
  <fieldset>
    <input type="text" placeholder="John Doe" id="name"><br>
    <input type="email" placeholder="john@example.com" id="email"><br>
    <textarea placeholder="Lorem ipsum dolor sit amet." id="message"></textarea>
  </fieldset>

  <input type="submit" value="Submit" disabled>
</form>

【讨论】：

【解决方案3】：

您应该通过querySelectorAll 选择fieldset 内的所有inputs/textareas 并循环for each 值。

你应该尝试下面的代码来得到你想要的。您可以使用 Jquery 使其变得简单。

const form = document.forms[0]
var inputs = form.querySelectorAll("fieldset > input, fieldset > textarea"),result;
const submit = form.querySelector("[type=submit]")
console.log(inputs);
		for (var i = 0; i < inputs.length; i++) {
	    inputs[i].addEventListener('change', function() {
        for (var j = 0; j < inputs.length; j++) {
          if (!inputs[j].value.length) {
            submit.disabled = true
            return;
          } else {
            submit.disabled = false
          }
        }
		});
	}

<form>
  <fieldset>
    <input type="text" placeholder="John Doe" id="name"><br>
    <input type="email" placeholder="john@example.com" id="email"><br>
    <textarea placeholder="Lorem ipsum dolor sit amet." id="message"></textarea>
  </fieldset>

  <input type="submit" value="Submit" disabled>
</form>

【讨论】：