填写所有字段后，禁用提交按钮（纯javascript）

Question

在jQuery中找到了很多答案，但是我想用纯Javascript做到。此代码无效。当所有字段都填满时，它将启用，但是当我删除其中一个字段中的文本时，它将再次启用。怎么了？

<form action='' method='post'>
    <input type='text' class='req' id='required_0' onkeydown='enableSubmit()' required>
    <input type='text' class='req' id='required_1' onkeydown='enableSubmit()' required>
    <input type='text' class='req' id='required_2' onkeydown='enableSubmit()' required>
    <input type='submit' value='Submit' disabled>
</form>

<script>
    function enableSubmit(){
        let inputs = document.getElementsByClassName('req');
        let btn = document.querySelector('input[type="submit"]');

        let disabled = false;
        for (var i = 0; i < inputs.length; i++){
            let changedInput = document.querySelector('#required_' + i);
            if (changedInput.value.trim() == "" || changedInput.value == null){
                btn.disabled = true;
                console.log("Button disabled");
            } else {
                btn.disabled = false;
                console.log("Button enabled")
            }
        }
    }
</script>

编辑：谢谢您的所有回答，我想我不会得到那么多-所以我真的不知道我应该选择谁作为信誉的“答案”。请在下面评论您的选择（以及原因），以帮助我选择。

Answer 1

您无法通过onkeydown来解决此问题，因为它不会正确触发事件。 onkeyup可以胜任。寻找可行的变体。

我对您的代码进行了一些优化。

• 您已经使用让输入= document.getElementsByClassName（'req'）;
过滤了输入
• 在第一个空字段上，我们使用 break;
打破循环

 function enableSubmit(){
   let inputs = document.getElementsByClassName('req');
   let btn = document.querySelector('input[type="submit"]');
   let isValid = true;

   for (var i = 0; i < inputs.length; i++){
     let changedInput = inputs[i];
     if (changedInput.value.trim() === "" || changedInput.value === null){
       isValid = false;
       break;
     }
   }
   btn.disabled = !isValid;
 }

<form action='' method='post'>
      <input type='text' class='req' id='required_0' onkeyup='enableSubmit()' required>
      <input type='text' class='req' id='required_1' onkeyup='enableSubmit()' required>
      <input type='text' class='req' id='required_2' onkeyup='enableSubmit()' required>
      <input type='submit' value='Submit' disabled>
</form>

Answer 2

好答案@Max Kaps 4bis.nl！我可以添加的是代码不会在鼠标事件上响应。我可以用鼠标切割或插入。

我的更新版本

 function enableSubmit(){
   let inputs = document.getElementsByClassName('req');
   let btn = document.querySelector('input[type="submit"]');
   let isValid = true;

   for (var i = 0; i < inputs.length; i++){
     let changedInput = inputs[i];
     if (changedInput.value.trim() === "" || changedInput.value === null){
       isValid = false;
       break;
     }
   }
   btn.disabled = !isValid;
 }

<form action='' method='post'>
      <input type='text' class='req' id='required_0' onkeyup='enableSubmit()' onmousedown='enableSubmit()' oninput='enableSubmit()' required>
      <input type='text' class='req' id='required_1' onkeyup='enableSubmit()' onmousedown='enableSubmit()' oninput='enableSubmit()' required>
      <input type='text' class='req' id='required_2' onkeyup='enableSubmit()' onmousedown='enableSubmit()' oninput='enableSubmit()' required>
      <input type='submit' value='Submit' disabled>
</form>

Answer 3

在循环中，一旦找到一个不为null或为空的输入，就将启用该按钮。您需要更改代码以检查所有字段均已填写。

您可以通过多种方式执行此操作。但最简单的方法就是颠倒您的逻辑。设置要启用的按钮。然后仅在任何字段不完整时禁用它。

function enableSubmit(){
       let inputs = document.getElementsByClassName('req');
       let btn = document.querySelector('input[type="submit"]');

       btn.disabled = false;
       for (var i = 0; i < inputs.length; i++){
         let changedInput = document.querySelector('#required_' + i);
         if (changedInput.value.trim() == "" || changedInput.value == null){
           btn.disabled = true;
           console.log("Found an incomplete field, set disabled to true");
         }
       }

}

这似乎有点难看，因为您要两次设置按钮状态。因此，另一种常见方法是使用标志。

function enableSubmit(){
           let inputs = document.getElementsByClassName('req');
           let btn = document.querySelector('input[type="submit"]');

           let disabled = false;
           for (var i = 0; i < inputs.length; i++){
             let changedInput = document.querySelector('#required_' + i);
             if (changedInput.value.trim() == "" || changedInput.value == null){
               disabled = true;
               console.log("Found an incomplete field, set disabled to true");
             }
           }
btn.disabled = disabled;

}

但是，这仍然不能完美运行，因为您正在调用按下按键的检查。按下该键时，该字段的值尚未更新，因此，第一次键入最终输入时，该按钮仍将被禁用。最好在按键上使用。我已经在下面的提琴手中对此进行了更新。

此处的提琴手链接-https://jsfiddle.net/8yaenwx7/

Answer 4

我的输入-我们正在检查时，请禁用按钮，直到确定为止。

 function enableSubmit(){
   let inputs = document.getElementsByClassName('req');
   let btn = document.querySelector('input[type="submit"]');
   let isValid = true;

   btn.disabled = true;
   for (var i = 0; i < inputs.length; i++){
     let changedInput = inputs[i];
     if (changedInput.value.trim() === "" || changedInput.value === null){
       isValid = false;
       break;
     }
   }
   btn.disabled = !isValid;
 }

<form action='' method='post'>
      <input type='text' class='req' id='required_0' onkeyup='enableSubmit()' onmousedown='enableSubmit()' oninput='enableSubmit()' required>
      <input type='text' class='req' id='required_1' onkeyup='enableSubmit()' onmousedown='enableSubmit()' oninput='enableSubmit()' required>
      <input type='text' class='req' id='required_2' onkeyup='enableSubmit()' onmousedown='enableSubmit()' oninput='enableSubmit()' required>
      <input type='submit' value='Submit' disabled>
</form>

Answer 5

这应该可以解决您的问题：

 function enableSubmit(){
   let inputs = document.getElementsByClassName('req');
   let btn = document.querySelector('input[type="submit"]');
   let isValid = true;

   for (var i = 0; i < inputs.length; i++){
     let changedInput = document.querySelector('#required_' + i);
     if (changedInput.value.trim() === "" || changedInput.value === null){
       isValid = false;
     }
   }
   btn.disabled = !isValid;
 }

<form action='' method='post'>
      <input type='text' class='req' id='required_0' onkeydown='enableSubmit()' required>
      <input type='text' class='req' id='required_1' onkeydown='enableSubmit()' required>
      <input type='text' class='req' id='required_2' onkeydown='enableSubmit()' required>
      <input type='submit' value='Submit' disabled>
</form>

Answer 6

在上述方法中存在漏洞。因为当您从第一个字段循环到最后一个字段时，即使我只找到最后一个填充的字段，也会启用该按钮。我修改了脚本并使其正常工作。

function enable(){
            let  inputs = document.getElementsByClassName('req');
            let btn = document.querySelector('input[type="submit"]');
            let i;
            for(i = 0;i < inputs.length;i++){
                let change = document.querySelector('#required_'+i);
                if(change.value.trim() == "" || change.value == null){
                    break;
                }
            }
            if(i == inputs.length)
                btn.disabled = false;
        }

我刚刚通过打破输入为空或空来修改了循环。

Answer 7

这是使用纯CSS的非JavaScript解决方案。更少的代码要处理。

作为示例，我在表单上添加了onsubmit false，就像我添加了input:invalid作为样式一样。我还添加了一些默认文本以显示验证情况。

pattern通过正则表达式验证：
.*表示任意数量的字符，包括没有字符。
\S正在捕获非空白

form:invalid > input[type="submit"] {
  opacity: 0.5;
  pointer-events: none;
}

input:invalid {
  background-color: red;
}

<form onsubmit='return false' action='' method='post'>
  <input type='text' required pattern=".*\S.*" value="text"><br/>
  <input type='text' required pattern=".*\S.*" value="  text text  "><br/>
  <input type='text' required pattern=".*\S.*"><br/>
  <input type='submit' value='Submit'>
</form>

您可以删除form:invalid > input[type="submit"] {，然后让浏览器处理所有错误。除非所有输入都满足所有要求，否则它将不会提交。

input:invalid {
  background-color: red;
}

<form onsubmit='return false' action='' method='post'>
  <input type='text' required pattern=".*\S.*" value="text"><br/>
  <input type='text' required pattern=".*\S.*" value="  text text  "><br/>
  <input type='text' required pattern=".*\S.*"><br/>
  <input type='submit' value='Submit'>
</form>

Answer 8

首先，让我们稍微调整一下HTML。最重要的是，novalidate将阻止本机约束验证阻止表单提交，除非所有字段都已填写（因为它们是required。而且，不要忘记命名字段，尤其是对于直接HTTP提交。< / p>

<form name='myForm' novalidate action='' method='post'>
  <input name='field0' required>
  <input name='field1' required>
  <input name='field2' required>
  <input type='submit' value='Submit' disabled>
</form>

现在使用JavaScript，我们实际上可以使用本机验证来计算有效的字段数。我们希望少于3个，我假设至少一个？

const myForm = document.forms.myForm
// this is more efficient than adding a listener on each field separately
myForm.addEventListener('input', enableSubmit)

function enableSubmit() {
  const button = myForm[3]
  // get all the fields in an array
  const validInputCount = [...myForm.elements].slice(0, 3)
  // then count how many are valid
    .reduce((sum, input) => sum + input.checkValidity(), 0)
  // finally apply your custom rule
  button.disabled = validInputCount > 0 && validInputCount < 3
}