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

Question

我具有验证所有字段的功能，但是我也想禁用提交按钮，直到填写好字段并且验证完成。这样做的最佳方法是什么？我对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: [phone])');
  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标记添加到每个必填输入中，这样，除非每个必填字段都填入a.e，否则用户无法提交表单。<input type="text" size="65" name="Name" id="nameInput"必需 >，但是选项二不会隐藏提交按钮。

如果您只想禁用提交而不是禁用提交按钮，我建议对相关输入字段使用required标记。