这种方法对我来说很有效:

Add onSubmit attribute in your form, don't forget to include return in the value. <form id='frm-contact' method='POST' action='' onSubmit="return contact()"> Define the function. function contact(params) { $.ajax({ url: 'sendmail.php', type: "POST", dataType: "json", timeout: 5000, data: { params:params }, success: function (data, textStatus, jqXHR) { // callback }, error: function(jqXHR, textStatus, errorThrown) { console.log(jqXHR.responseText); } }); return false; }

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

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

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

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

这里有一种更简单的方法:

像这样创建你的表单(可以是一个什么都不做的虚拟表单):

<form class="validateDontSubmit">
...

绑定所有你不想提交的表单:

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;
})

现在让我们假设你有一个<a>(在<form>内)，点击你想要验证表单:

$('#myLink').click(function(e){
  //Leverage the HTML5 validation w/ ajax. Have to submit to get em. Wont actually submit cuz form
  //has .validateDontSubmit class
  var $theForm = $(this).closest('form');
  //Some browsers don't implement checkValidity
  if (( typeof($theForm[0].checkValidity) == "function" ) && !$theForm[0].checkValidity()) {
     return;
  }

  //if you've gotten here - play on playa'
});

这里有几点注意事项:

我已经注意到，你不必实际提交表单验证发生-调用checkValidity()就足够了(至少在chrome中)。如果其他人可以在其他浏览器上添加测试这个理论的评论，我会更新这个答案。 触发验证的东西不一定在<表单>中。这只是一种干净而灵活的通用解决方案。

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

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

    if $("form")[0].checkValidity()
      $.ajax(
        url: "url"
        type: "post"
        data: {

        }
        dataType: "json"
        success: (data) ->

      )
    else
      #important
      $("form")[0].reportValidity()

来自: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...
}