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

Question

I have several validation functions that work fine and I want to write an additional validation in simple javascript ( no jQuery, etc ) for the entire form that disables/enables the Submit button depending on whether the other validation functions return true or false. How do I go about that?

For example, for my main HTML I have:

 <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>

For my script I have:

 function validateInput1(){
 ...
 }

 function validateInput2(){
 ...
 }

Now I want to write a function with something like:

function validateForm(){

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

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

How do I do this?

Answer 1

Start the button off as disabled. Hook to the onchange event for each of the form inputs, and then have it check the validateForm() function to see if all the forms are valid. After that, if they're all valid, set the submit button to enabled, otherwise set it to disabled.

 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>