如何验证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.

请注意,并非所有浏览器都支持它.