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

根据这个：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
});

Answer 2

使用：

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

    return false;
});

Answer 3

您可以使用javascript中的html5表单验证，仅调用方法 reportValidity（）

在您的示例中：

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

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

Answer 4

这是默认行为和javascript的微妙杠杆，可以创建您想要的内容。

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

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

Answer 5

使用纯java脚本

<script>

    document.getElementById('membershipform')
        .addEventListener("submit", 
            function(event) {
                event.preventDefault();

                // write stuff

            });

</script>

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

5 个答案: