html5表单验证,void form action和执行jQuery当所有html5表单元素验证？

我有一个简单的HTML5表单，我想用于必要的字段验证。我的问题是，我想使用HTML5表单验证同时避免实际提交表单，因为我想执行一个jQuery ajax调用。我知道你可以禁用html5验证，但我想保持这是我的主要表单验证方法，而不是一个jQuery插件。

有什么想法吗？

HTML

<form action="donothing" id="membershipform" method="get" accept-charset="utf-8">
    <input type="text" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="first and last name" required>
    <input type="email" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="email" required>
    <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="phone" required>    
    <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="mailing address" required>      
    <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="how you heard about us" required>
    <p>
        <input type="submit" id="submitbtn" class="submitbtn" value="Continue" style="width:265px">
    </p>
</form>

JAVASCRIPT：

$(function(){
  $("#submitbtn").click(function(){
    $.ajax({
      url: "<?PHP bloginfo('template_url') ?>/ajax-membership.PHP",success: 
      function(txt){
        if(txt){
          $("#thankyou").slideDown("slow");
        }
      }
    });
  });
});

解决方法

根据这个： Do any browsers yet support HTML5’s checkValidity() method?，这可能不是最新的真相，因为HTML5是一个正在进行的工作，Form.checkValidity()和element.validity.valid应该让你从JavaScript访问验证信息。假设这是真的，你的jQuery将需要附加自己的形式提交，并利用：

$('#membershipform').submit(function(event){
    // cancels the form submission
    event.preventDefault();

    // do whatever you want here
});

原文地址：https://www.jb51.cc/html5/169441.html