Javascript：如何禁用提交按钮，直到验证所有字段？

Question

我有几个工作正常的验证函数，我想用简单的 javascript（没有 jQuery 等）为整个表单编写一个附加验证，根据其他验证函数返回 true 还是 false 来禁用/启用“提交”按钮。我该怎么办？

例如，对于我的主要 HTML，我有：

 <form id="form" method="POST">
      <label class="form">Field 1</label><input type="text" name="input1" onkeyup="validateInput1(); return false">
      <label class="form">Field 2</label><input type="text" name="input2" onkeyup="validateInput2(); return false">
      ...
      <button id="submit" type="submit" value="submit">Submit</button>
 </form>

对于我的脚本，我有：

 function validateInput1(){
 ...
 }

 function validateInput2(){
 ...
 }

现在我想编写一个类似以下内容的函数：

function validateForm(){

    var submitButton = document.getElementById('submit');
    submitButton.disabled = true;

    /*If all other validation functions like validateInput1() returns true then submitButton.disabled = false*/
}

我该怎么做呢？

Answer 1

将按钮启动为禁用状态。挂钩onchange每个表单输入的事件，然后让它检查函数validateForm()以查看所有表单是否有效。之后，如果它们都有效，请将提交按钮设置为启用，否则将其设置为禁用。

var inputs = document.querySelectorAll('#form input');

var validateInput1 = function()
{
  return document.getElementById('input1').value != '';
}

var validateInput2 = function()
{
  return document.getElementById('input2').value != '';
}
    
var validateForm = function() {

  if ( !validateInput1() ) {
    return false;
  }

  if ( !validateInput2() ) {
    return false;
  }

  return true;
}

for ( var i = 0, len = inputs.length; i < len; i++ )
{
  var checkValid = function() {
    document.getElementById('submit').disabled = !validateForm();
    
    //Is the same as:
    /*if ( !validateForm() )
    {
      document.getElementById('submitButton').disabled = true;
    }
    else
    {
      document.getElementById('submitButton').disabled = false;
    }*/
  }
  
  inputs[i].addEventListener('change', checkValid);
  inputs[i].addEventListener('keyup', checkValid);
}

<form id="form" method="POST" onsubmit="alert('Submitted!'); return false">
    <label class="form">Field 1</label><input type="text" name="input1" id="input1">
    <label class="form">Field 2</label><input type="text" name="input2" id="input2">
    <button id="submit" type="submit" value="submit" disabled="disabled">Submit</button>
</form>