当验证所有html5表单元素时,html5表单验证,void表单操作和执行jQuery？

Question

我有一个简单的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");
        }
      }
    });
  });
});

Answer 1

根据这个:任何浏览器还支持HTML5的checkValidity()方法吗？,这可能不是最新的事实,因为HTML5是一项正在进行的工作,Form.checkValidity()并且element.validity.valid应该让您从JavaScript访问验证信息.假设这是真的,你的jQuery需要将自己附加到表单提交并使用它:

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

    // do whatever you want here
});

Answer 2

您可以从 javascript 使用 html5 表单验证，只调用方法reportValidity()

在你的例子中：

<script>
    document.querySelector('#membershipform').reportValidity()
</script>

reportValidity 运行 html5 表单验证并返回 true/false。