这使我能够显示带有表单验证的原生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。

参考

希望能帮助别人。

我找到了一个适合我的方法。 只需要像这样调用一个javascript函数:

action=“javascript：myFunction（）;”

然后是html5验证……真的很简单:-)

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

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

我认为这是最好的方法

将使用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>

$(document).on("submit", false);

submitButton.click(function(e) {
    if (form.checkValidity()) {
        form.submit();
    }
});

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

问题是，当你的<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验证(类型和模式匹配)，而无需提交表单。