如何在不提交表单的情况下触发标准 HTML5 表单验证？

Question

我的应用程序中有此表单，我将通过 AJAX 提交它，但我想使用 HTML5 进行客户端验证。所以我希望能够通过普通的 HTML 字段强制进行表单验证。

我想在不提交表单的情况下触发验证。是否可以？

HTML 代码示例

<form id="frm" class="form-horizontal form-label-left">
  <div class="col-md-6 col-sm-6 col-xs-12">
    <input id="name" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="name" placeholder="both name(s) e.g Jon Doe" required="required" type="text">
  </div>

  <div class="form-group">
    <div class="col-md-6 col-md-offset-3">
      <button id="send" type="button" class="btn btn-success" onclick="saveForm()">Submit</button>
    </div>
  </div>
</form>

<hr />
<button id="checkValidity">Check Validity</button>

Answer 1

如果您使用 HTML5 验证，如果您为按钮指定类型且存在一些无效数据，它不会让您提交表单。submit

另外，您似乎不需要使用其他方法来提交表单。您的按钮：

<button id="send" type="button" class="btn btn-success" onclick="saveForm()">Submit</button>

调用一个函数saveForm()，因此在该函数中，在发送 AJAX 请求之前，执行您想要的任何额外的 JS 验证，return如果您发现它无效，请尽早执行