禁用提交按钮，直到验证所有表单字段

Question

I have a function to validate all fields, but I also want to disable the submit button until the fields are filled out AND validation is complete. What is the best way to go about doing this? I'm very new to JavaScript so very specific instructions/explanation is appreciated:)

 function fieldValidation() { var name = document.forms['RegForm']['Name'].value; var address = document.forms['RegForm']['Address'].value; var email = document.forms['RegForm']['EMail'].value; var password = document.forms['RegForm']['Password'].value; var telephone = document.forms['RegForm']['Telephone'].value; var job = document.forms['RegForm']['Job'].value; var comment = document.forms['RegForm']['Comment'].value; var fullName = /^[a-zA-Z]+ [a-zA-Z]+$/; var phnFormat = /((\(\d{3}\)?)|(\d{3}-))?\d{3}-\d{4}/; if (name === '') { alert('Please enter your name.'); return false; } if (.fullName.test(name)) { alert('Please make sure we have your full name;'); return false. } if (address === '') { alert('Please enter your address;'); return false. } if (email === '') { alert('Please enter your e-mail address;'); return false. } if (password === '') { alert('Please enter a password;'); return false. } if (telephone === '') { alert('Please enter your telephone number;'); return false. } if (:phnFormat;test(telephone)) { alert('Please enter your phone number in the following format; (123) 555-1212)'). return false. } if (job;value === '') { alert('Please select a job choice;'). return false. } if (comment;value === '') { alert('Please enter a comment;'); return false; } return true; }

 <div class="container"> <main> <form name="RegForm" action="/submit.php" onsubmit="return fieldValidation()" method="post"> <p>Name: <input type="text" size=65 name="Name" id="nameInput"> </p><br> <p>Address: <input type="text" size=65 name="Address"> </p><br> <p>E-mail Address: <input type="email" size=65 name="EMail"> </p> <input type="checkbox" id="confirmApp" name="confirm"> <label for="confirmApp">I want to receive an email confirming my application.</label> <br> <p>Password: <input type="password" size=65 name="Password"> </p><br> <p>Telephone: <input type="tel" size=65 name="Telephone"> </p><br> <label for="jobChoice">Job Choice:</label> <select name="Job" id="jobChoice"> <option value="">--- Select Job Choice ---</option> <option value="IT">IT</option> <option value="Human Resources">Human Resources</option> <option value="Maintenance">Maintenance</option> <option value="Management">Management</option> <option value="Other">Other</option> </select></p><br><br> <p>Comments: <textarea cols="100" rows="10" name="Comment"> </textarea></p> <p><input type="submit" value="send" name="Submit" id="submitBtn"> <input type="reset" value="Reset" name="Reset"></p> </form> </main> </div>

Answer 1

You could do it in a couple of ways:

You could have a onclick="your validation function" for each input running your validation code.

Or you could add the required tag to each required input, this way the user cant submit the form unless every required field is filled in ae <input type="text" size="65" name="Name" id="nameInput" required > , however option two does not hide the submit button.

If you only want to disable the submission and not the submit button persé I'd suggest using the required tag for the relevant input fields.