根据这个问题，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()

});

2022香草JS解决方案

纯JavaScript提供了所需的所有函数。我知道这个问题是关于jQuery的，但即使是jQuery的答案也使用了这些函数，即checkValidity()和reportValidity()。

测试整个表单

let form = document.getElementById('formId');
// Eventlistener can be another event and on another DOM object this is just an example
form.addEventListener('submit', function (event) {
    // Only needed if event is submit, otherwise this line can be skipped 
    event.preventDefault();

    // This is the important part, test if form is valid
    if (form.checkValidity() === false){
        // This is the magic function that displays the validation errors to the user
        form.reportValidity();   
        return; 
    }

    // Code if all fields are valid; continue form submit or make Ajax call.
})

测试特定领域

checkValidity()和reportValidity()不仅可以在表单上使用，还可以在特定的字段上使用。如果不需要，不需要创建表单或虚拟提交按钮。

// Get field of interest
let inputElement = document.querySelector("[name='" + inputName + "']");
// Check if the element is valid
if (inputElement.checkValidity() === false){
    // If not, show the errors to the user
    inputElement.reportValidity();
    return;
}

// Nothing? Great, continue to the Ajax call or whatever

显然，这必须在由事件侦听器调用的函数中才有意义。

你说的是两种不同的东西“HTML5验证”和使用javascript/jquery的HTML表单验证。

HTML5“拥有”用于验证表单的内置选项。例如在字段上使用“required”属性，如果不使用javascript/jquery，表单提交可能会失败(基于浏览器实现)。

使用javascript /jquery，你可以做这样的事情

$('your_form_id').bind('submit', function() {
   // validate your form here
   return (valid) ? true : false;
});

这使我能够显示带有表单验证的原生HTML 5错误消息。

<button id="btnRegister" class="btn btn-success btn btn-lg" type="submit"> Register </button>



$('#RegForm').on('submit', function () 
{

if (this.checkValidity() == false) 
{

 // if form is not valid show native error messages 

return false;

}
else
{

 // if form is valid , show please wait message and disable the button

 $("#btnRegister").html("<i class='fa fa-spinner fa-spin'></i> Please Wait...");

 $(this).find(':submit').attr('disabled', 'disabled');

}


});

注意:RegForm是表单id。

参考

希望能帮助别人。

我认为这是最好的方法

将使用jQuery验证插件，使用最佳实践的表单验证，它也有良好的浏览器支持。因此，您不必担心浏览器兼容性问题。

并且我们可以使用jQuery验证valid()函数来检查所选表单是否有效，或者是否所有所选元素都有效，而无需提交表单。

<form id="myform">
   <input type="text" name="name" required>
   <br>
   <button type="button">Validate!</button>
</form>
<script>
  var form = $( "#myform" );
  form.validate();
  $( "button" ).click(function() {
    console.log( "Valid: " + form.valid() );
  });
</script>