html5表单验证，无效表单操作，并执行所有html5表单元素验证时的jQuery？

问题描述：

我有一个简单的HTML5表单，我想用它来进行必要的字段验证。我的问题是，我想使用HTML5表单验证但同时避免实际提交表单，因为我想要执行jQuery ajax调用。我知道你可以禁用html5验证，但我想保持这个作为我的表单验证的主要方法，而不是一个jQuery插件。html5表单验证，无效表单操作，并执行所有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 
});

完美！谢谢！ – Rees 2011-04-19 03:42:45

对于所有读者：请确保在该函数中包含事件参数，否则这不适用于Firefox。 – Marcel 2015-03-26 21:42:53

@Max，你的意思是确保将'event'参数传递给回调函数吗？如果是这样，是的，这在所有浏览器中都是必需的，否则您无法调用'preventDefault'。 – Milimetric 2015-03-26 22:05:18

答

用途：

$('#membershipform').submit(function(){ 
    // do whatever you want here 

    return false; 
});

如果返回语句上面的代码抛出错误，这将不起作用。如果发生错误，表单仍会转到“action”属性中指定的地址。 – Stan 2013-01-11 00:28:57

是的！如果我希望我的表单通过验证部分但不提交，这是有效的。做得好 – Wiser 2016-01-09 18:00:02

答

使用纯java脚本

<script> 

document.getElementById('membershipform').addEventListener("submit", function(e) 
{ 
     event.preventDefault(); 
     //write stuff 
}); 

    </script>

答

这是默认行为和JavaScript的一个微妙的杠杆来创建你想要的。

var form = document.getElementById("purchaseForm"); 
if(form.checkValidity()){ 
    console.log("valid"); 
    e.preventDefault(); 
}else{ 
    console.log("not valid"); 
    return; 
}

如果表单有效，然后使用preventDefault（）并继续使用您的函数（例如通过ajax发送）。如果无效，则返回而不阻止默认值，您应该发现表单验证的默认操作发生在您的表单输入中。

html5表单验证，无效表单操作，并执行所有html5表单元素验证时的jQuery？

相关推荐