jquery - 如何验证 HTML5 表单而不发布表单？

Question

我有一个带有一些 html 属性的表单，例如：

<form>
      <label>Full  Name</label>

      <input type="text" name="firstname" class="span3" required="required">
      <label>Email Address</label>
      <input type="email" name="email" class="span3" required="required">
      <label>Username</label>
      <input type="text" name="username" class="span3" required="required">
      <label>Password</label>

当用户单击按钮时，我希望 html5 应用验证规则。

如果验证规则正常，则不要提交表单，而是使用一些 $_POST ajax

任何想法 ？

Answer 1

checkValidity()将使用本机 HTML5 验证来验证表单：

$('form').on('submit', function(e) { // or on button click ?
    e.preventDefault()

    var valid = e.target.checkValidity();

    if (valid) {
        // do ajax
    }
});

来自MDN：

在 HTMLFormElement 对象上，checkValidity() 方法，如果所有受约束验证约束的表单元素的关联元素都满足其约束，则返回 true，如果不满足，则返回 false。

请注意，并非所有浏览器都支持它。

Answer 2

像这样的东西

$('form').on('submit', function(e) {
 if (e.target.checkValidity() === false)
 {
   e.preventDefault(); // disable the "normal" action of submit
 }
});