禁用提交按鈕，直到驗證所有表單字段

Question

我有一個 function 來驗證所有字段，但我也想禁用提交按鈕，直到填寫字段並完成驗證。 go 關於這樣做的最佳方法是什么？ 我對 JavaScript 非常陌生，因此非常感謝您提供非常具體的說明/解釋:)

 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

您可以通過以下幾種方式做到這一點：

您可以為每個運行驗證代碼的輸入設置onclick="your validation function" 。

或者您可以將required的標簽添加到每個必需的輸入中，這樣用戶無法提交表單，除非每個必填字段都填寫在 ae <input type="text" size="65" name="Name" id="nameInput"必需> ，但是選項二不會隱藏提交按鈕。

如果您只想禁用提交而不是提交按鈕，我建議您對相關輸入字段使用required標記。