html5表单验证，无效表单操作，并在所有html5表单元素都经过验证时执行jQuery？ [英] html5 form validation, void form action and execute jQuery when all html5 form elements are validated?

问题描述

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

有什么想法？

HTML

 < form action =donothing id =membershipformmethod =getaccept-charset =utf-8> 
< input type =textclass =borderr3 innershadow3name =some_namevalue =id =some_nameplaceholder =first and last namerequired> 
< input type =emailclass =borderr3 innershadow3name =some_namevalue =id =some_nameplaceholder =emailrequired> 
< input type =phoneclass =borderr3 innershadow3name =some_namevalue =id =some_nameplaceholder =phonerequired> 
< input type =phoneclass =borderr3 innershadow3name =some_namevalue =id =some_nameplaceholder =邮寄地址required> 
< input type =phoneclass =borderr3 innershadow3name =some_namevalue =id =some_nameplaceholder =您如何听说我们required> 
< p> 
< input type =submitid =submitbtnclass =submitbtnvalue =Continuestyle =width：265px> 
< / p> 
< / form> 
  

JAVASCRIPT：

  $（function（）{
 $（＃submitbtn）。click（function（）{
 $ .ajax（{
 url ：<？php bloginfo（'template_url'）？> /ajax-membership.php，
成功：
函数（txt）{
 if（txt）{
 $（＃thankyou）。slideDown（slow）; 
} 
} 
}）; 
}）; 
}）; 
  

解决方案

据此：是否有任何浏览器支持HTML5的checkValidity（）方法？，这可能不是最新的因为HTML5是一项正在进行的工作，所以 Form.checkValidity（）和 element.validity.valid 应该让你从JavaScript访问验证信息。假设这是真的，你的jQuery需要将自己附加到表单提交并使用它：

  $（'＃membershipform '）.submit（function（event）{
 //取消表单提交
 event.preventDefault（）; 
 
 //在这里做任何你想做的事
} ）; 
  

I have a simple HTML5 form that I want to leverage for required field validation. My issue is that I want to use the HTML5 form validation BUT at the same time avoid actually submitting the form because I want to execute a jQuery ajax call instead. I know you can disable html5 validation, but I want to keep this as my primary method of form validation instead of a jQuery plugin.

Any thoughts?

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");
        }
      }
    });
  });
});

解决方案

According to this: Do any browsers yet support HTML5's checkValidity() method?, and this may not be the latest truth since HTML5 is a work in progress, the Form.checkValidity() and element.validity.valid should let you access validation information from JavaScript. Assuming that's true, your jQuery would need to attach itself to the form submit and make use of that:

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

    // do whatever you want here
});

这篇关于html5表单验证，无效表单操作，并在所有html5表单元素都经过验证时执行jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！