根据这个问题，html5的有效性首先应该使用jQuery进行验证，在大多数答案中，这是不会发生的，原因如下:

同时使用html5表单的默认函数进行验证

checkValidity();// returns true/false

我们需要理解jQuery返回对象数组，而选择像这样

$("#myForm")

因此，您需要指定第一个索引以使checkValidity()函数工作

$('#myForm')[0].checkValidity()

以下是完整的解决方案:

<button type="button" name="button" onclick="saveData()">Save</button>

function saveData()
{
    if($('#myForm')[0].checkValidity()){
        $.ajax({
          type: "POST",
          url: "save.php",
          data: data,
          success: function(resp){console.log("Response: "+resp);}
        });
    }
}

下面的代码为我工作，

$("#btn").click(function () {

    if ($("#frm")[0].checkValidity())
        alert('sucess');
    else
        //Validate Form
        $("#frm")[0].reportValidity()

});

要检查某个字段是否有效，请使用:

$('#myField')[0].checkValidity(); // returns true|false

要检查表单是否有效，请使用:

$('#myForm')[0].checkValidity(); // returns true|false

如果你想显示某些浏览器(如Chrome)的原生错误消息，不幸的是，唯一的方法是通过提交表单，就像这样:

var $myForm = $('#myForm');

if (!$myForm[0].checkValidity()) {
    // If the form is invalid, submit it. The form won't actually submit;
    // this will just cause the browser to display the native HTML5 error messages.
    $myForm.find(':submit').click();
}

请记住，到目前为止，并不是所有浏览器都支持HTML5验证。

这是让HTML5对任何表单执行验证的一种非常直接的方式，同时仍然拥有对表单的现代JS控制。唯一需要注意的是提交按钮必须在<form>内。

html

<form id="newUserForm" name="create">
Email<input type="email" name="username" id="username" size="25" required>
Phone<input type="tel" id="phone" name="phone" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" size="12" maxlength="12" required>
<input id="submit" type="submit" value="Create Account" >
</form>

js

// bind in ready() function
jQuery( "#submit" ).click( newAcctSubmit );

function newAcctSubmit()
{
  var myForm = jQuery( "#newUserForm" );

  // html 5 is doing the form validation for us,
  // so no need here (but backend will need to still for security)
  if ( ! myForm[0].checkValidity() )
  {
    // bonk! failed to validate, so return true which lets the
    // browser show native validation messages to the user
    return true;
  }

  // post form with jQuery or whatever you want to do with a valid form!
  var formVars = myForm.serialize();
  etc...
}

$("#form").submit(function() { $("#saveButton").attr("disabled", true); });

不是最好的答案，但对我来说是可行的。

也许是迟到了，但不知何故，我在试图解决类似的问题时发现了这个问题。由于该页没有代码为我工作，同时我提出了解决方案，工作如指定。

问题是，当你的<form> DOM包含单个<button>元素时，一旦触发，<button>将自动sumbit形式。如果您使用AJAX，您可能需要防止默认操作。但有一个问题:如果你只是这样做，你也会阻止基本的HTML5验证。因此，只有当表单有效时，才应该防止该按钮的默认值。否则，HTML5验证将阻止你提交。jQuery checkValidity()将帮助这:

jQuery:

$(document).ready(function() {
  $('#buttonID').on('click', function(event) {
    var isvalidate = $("#formID")[0].checkValidity();
    if (isvalidate) {
      event.preventDefault();
      // HERE YOU CAN PUT YOUR AJAX CALL
    }
  });
});

上面描述的代码将允许您使用基本的HTML5验证(类型和模式匹配)，而无需提交表单。