保持提交按钮处于禁用状态，直到表单字段填满

Question

Would someone be able to take a look at my code and see what I'm missing here?

I have a multi-page form with quite a lot of inputs, and I would like to keep "next page" buttons and the final "submit" buttons disabled until all the fields are full.

I am trying to recreate the process on a smaller scale but in my tests, I cannot seem to re-enable the disabled submit input. I've checked the console and the JS is logging the variable elements so I'm not sure what I'm missing.

 function checkForm() { var elements = document.forms[0].elements; var cansubmit= true; for(var i = 0; i < elements.length; i++) { if(elements[i].value.length == 0 || elements[i].value.length == "" || elements[i].value.length == null) { cansubmit = false; } document.getElementById("myButton").disabled = !cansubmit; } }; 

 <form> <label for="firstName">First Name:</label> <input type="text" id="firstName" onkeyup="checkForm()" /> <br /> <label for="lastName">Last Name:</label> <input type="text" id="lastName" onkeyup="checkForm()" /> <button type="button" id="myButton" disabled="disabled">Test me</button> </form> 

Answer 1

Your elements array includes your button , which has no value. This will cause your loop to always evaluate to cansubmit = false; .

Try this instead: https://jsfiddle.net/e00sorLu/2/

function checkForm()
{
    var elements = document.forms[0].elements;

    var cansubmit= true;
    for(var i = 0; i < elements.length; i++)
    {
        if(elements[i].value.length == 0 && elements[i].type != "button")
        {
            cansubmit = false;
        }

    }

    document.getElementById("myButton").disabled = !cansubmit;  
};

Answer 2

Answer was already accepted, but here are a few other things you might consider:

The way you have it set up now, for absolutely anything other than an empty string "" you're setting button.disabled = false and enabling the button.

1. You're checking value.length 3 times, but you actually want to check .value instead. The length property is only a numeric value for how many code units are in the string - it won't ever be "" or null , so the only thing you're really checking is the very first condition for an empty string of length 0.

   You're also not accounting for multiple white spaces in a blank string, so " " would be valid) ... or special characters, so this would be valid: (function goodByeWorld(evil){//do the bad things})();

2. You're running the checkForm() function on all form elements (including the <button> ) after every single keystroke. This is unnecessary.

   Aside from including <button> , which was pointed out in the accepted answer & will always cause this to fail, you should either validate each individual form element with inline error checking (preferable), or validate all of them once just prior to submission (preferable to server-side validation & kicking it back after submission).

   You could bind to onblur() instead and send the current element's value as an argument once that field loses focus. eg change to: function checkValue(value) {//validate the value} ) and either onblur = checkValue(this) in the HTML or preferably a non-inline event handler that lives in the JS file instead.

   You could still do it onkeyup = checkValue(this) to check after every keystroke, but change the function to only check 1 element instead of checking theentireform dozens of times.

   This approach would let you individually keep track of each separate form element's validity (lots of options here depending on what "valid" means - store an array of values, objects with values or "valid/invalid" flags, etc, switch on the field labels to validate this for different types of information). You can run additional validation on the individual elements as well (eg min/max name length, eliminating special characters, etc), and display real-time error checking messages next to each form element.

3. You're defaulting to cansubmit = true which doesn't make much sense, given what you intend for this code to do. Using !cansubmit only serves to confuse yourself & others reading the code. For readability, consider inverting it to disableSubmit so it's in sync with the button.disabled state, which should only be true or false .

Answer 3

Or you can use jQuery.

    <script type="text/javascript">
        function checkForm() {
            var cansubmit = false;
            $('form input[type="text"]').each(function (index, element) {
                if (element.value == "") {
                    cansubmit = true;
                }
            });
            document.getElementById("myButton").disabled = cansubmit;
        }
    </script>