表单验证不会停止提交？答案

【问题标题】：Form Validation doesn't stop submission?表单验证不会停止提交？
【发布时间】：2016-11-22 20:32:41
【问题描述】：

<div class="form-style-5">
  <form action="send-sms.php" method="POST">
    <fieldset>
      <legend><span class="number">1</span> Your Information</legend>
      <input type="text" name="field1" id="name" placeholder="Your Name *">
      <input type="email" name="field2" id="contact"placeholder="Contact Information (Email, Phone Number, etc.) *">
      <input type="location" name="field3" id="location" placeholder="Your Location (i.e. McNutt, Hodge Hall, exact address, etc.)*">
      <input type="text" name="field4" id="misc" placeholder="Miscellaneous Information That May Be Important"></textarea>
      <label for="job">Urgency:</label>
      <select id="job" name="field5">
        <optgroup label="Urgency level: just for us to prioritize properly">
          <option value="Not Urgent">Low (ETA: Up to an hour)</option>
          <option value="reading">Normal (ETA: Up to 45 mins)</option>
          <option value="boxing">Critical (ETA: ASAP!)</option>
        </optgroup>
      </select>
    </fieldset>
    <fieldset>
      <legend><span class="number">2</span>Task that needs completion</legend>
      <input type="text" id="task" name="field6" placeholder="Let Us Know How We Can Help!*"></input>
    </fieldset>
    <input name="submit" type="submit" value="Submit" onClick="push();validateForm();"/>
  </form>
</div>

我正在使用简单的 JS 验证功能，它被称为“onClick”我的提交按钮。如果有人提交空表单，我的错误消息会正确显示，但是，一旦您在该警报上按“确定”，表单仍然会被提交。我在不同的表单上有一个类似的验证系统，它运行顺利......对我的代码进行的任何修改，即使它不能解决整体问题，也将不胜感激。

  function validateForm() {
      var errormessage = "";
      if (document.getElementById('name').value == "") {
          errormessage += "Please enter your name. \n";
          document.getElementById('name').style.borderColor = "red";
      }
      if (document.getElementById('contact').value == "") {
          errormessage += "Please enter your contact. \n";
          document.getElementById('contact').style.borderColor = "red";
      }
      if (document.getElementById('location').value == "") {
          errormessage += "Tell us where to come! \n";
          document.getElementById('location').style.borderColor = "red";
      }
      if (document.getElementById('task').value == "") {
          errormessage += "Tell us how we can help! \n";
          document.getElementById('task').style.borderColor = "red";
      }
      if (errormessage != "") {
          alert(errormessage);
          return false;
      }
      return true;
  };

【问题讨论】：

还要加上HTML..validateForm是怎么调用的？
根据 Rayon 的要求，您能说明一下 validateForm 函数是如何使用的吗？
我刚刚添加了 HTML，谢谢@Rayon
onClick="push();return validateForm();"

标签： javascript jquery html forms validation

【解决方案1】：

为了防止表单提交，必须停止该事件。点击处理程序设置将冒泡提交，因为它不提供停止事件的方法。

一种简单的方法是返回 false，正如您在所示函数中所尝试的那样。但是，没有使用该返回值。请注意，您的内联事件处理程序如下所示

onClick="push();validateForm();"

由于 validateForm 中的值从未使用过，因此事件处理程序会在调用验证后继续。解决方法是使用返回值

onClick="push();return validateForm();"

如果验证失败，现在将正确停止事件。

【讨论】：