Javascript：如何在所有字段都經過驗證之前禁用提交按鈕？

Question

我有幾個驗證功能可以正常工作，我想用簡單的javascript（ 沒有jQuery等 ）編寫整個窗體的附加驗證，該窗體根據其他驗證函數返回true還是false來禁用/啟用Submit按鈕。 我該怎么辦？

例如，對於我的主要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>