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

來源

2011-04-16 Rees

根據這個：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 
});

來源

2011-04-16 18:57:33 Milimetric

完美！謝謝！ – 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; 
});

來源

2011-08-09 22:04:02 Darm

如果返回語句上面的代碼拋出錯誤，這將不起作用。如果發生錯誤，表單仍會轉到「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>

來源

2016-12-07 05:34:53 Chirag

這是默認行爲和JavaScript的一個微妙的槓桿來創建你想要的。

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

如果表單有效，然後使用preventDefault（）並繼續使用您的函數（例如通過ajax發送）。如果無效，則返回而不阻止默認值，您應該發現表單驗證的默認操作發生在您的表單輸入中。

來源

2017-09-21 15:28:09 benbyford

html5表單驗證，無效表單操作，並執行所有html5表單元素驗證時的jQuery？

回答

相關問題