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

【问题标题】：Disable Submit button until all form fields are validated禁用提交按钮，直到验证所有表单字段
【发布时间】：2020-03-14 16:09:20
【问题描述】：

我有一个验证所有字段的功能，但我还想禁用提交按钮，直到填写完字段并完成验证。这样做的最佳方法是什么？我对 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>

【问题讨论】：

我检查了你的代码，我发现你想禁用发送按钮，但是有一个错误。如果您禁用发送按钮，那么您的验证将如何工作，因为使用发送按钮提交表单时验证正在工作。
哦，我明白你在说什么。那么我应该将验证更改为 onblur 吗？

标签： javascript forms validation form-submit disable

【解决方案1】：

你可以通过以下几种方式做到这一点：

对于每个运行验证代码的输入，您可以有一个 onclick="your validation function"。

或者您可以将required 标签添加到每个必填项，这样用户就无法提交表单，除非每个必填字段都填写了 a.e。 <input type="text" size="65" name="Name" id="nameInput"必需>，但是选项二不会隐藏提交按钮。

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

【讨论】：