Javascript：如何在验证所有字段之前禁用提交按钮？

Question

我有几个可以正常工作的验证函数，我想用简单的 javascript（no 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>