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

前端之家收集整理的这篇文章主要介绍了html5表单验证,void form action和执行jQuery当所有html5表单元素验证?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个简单的HTML5表单,我想用于必要的字段验证。我的问题是,我想使用HTML5表单验证同时避免实际提交表单,因为我想执行一个jQuery ajax调用。我知道你可以禁用html5验证,但我想保持这是我的主要表单验证方法,而不是一个jQuery插件

有什么想法吗?

HTML

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

JAVASCRIPT:

  1. $(function(){
  2. $("#submitbtn").click(function(){
  3. $.ajax({
  4. url: "<?PHP bloginfo('template_url') ?>/ajax-membership.PHP",success:
  5. function(txt){
  6. if(txt){
  7. $("#thankyou").slideDown("slow");
  8. }
  9. }
  10. });
  11. });
  12. });

解决方法

根据这个: Do any browsers yet support HTML5’s checkValidity() method?,这可能不是最新的真相,因为HTML5是一个正在进行的工作,Form.checkValidity()和element.validity.valid应该让你从JavaScript访问验证信息。假设这是真的,你的jQuery将需要附加自己的形式提交,并利用:
  1. $('#membershipform').submit(function(event){
  2. // cancels the form submission
  3. event.preventDefault();
  4.  
  5. // do whatever you want here
  6. });

猜你在找的HTML5相关文章