jQuery Mobile和jQuery驗證

我正在使用jQuery Mobile和jQuery驗證並且無法使其工作。這是我的代碼到目前爲止。jQuery Mobile和jQuery驗證

$('#submit').on('click', function() { 
    $("#page2 form").validate({ 
     rules: { 
      firstName: "required", 
      lastName: "required" 
     }, 
    }); 
});

這不起作用。我也嘗試過，只是通過包含驗證而沒有點擊事件，這也不起作用。想法？

更新：如果有人看這個，代碼是好的，我在我的標記錯誤。儘管如此，Sparky仍然是一個很好的答案。

來源

2013-02-24 Ian Hoar

您是否收到任何javascript錯誤？你在用什麼移動設備？ – mjshaw 2013-02-24 19:16:25

沒有JavaScript錯誤，現在只需在瀏覽器上進行測試。它需要在桌面和移動設備上工作。我無法弄清楚爲什麼我無法讓他們工作。我以前從未遇到過驗證插件的問題。 – 2013-02-24 19:23:25

只要您正確初始化插件並刪除click處理程序，您的代碼就能按預期工作：http：// jsfiddle。net/6FYyv/ – Sparky 2013-02-24 22:34:35

您的代碼：

$('#submit').on('click', function() { // <-- REMOVE this 
    $("#page2 form").validate({ 
     rules: { 
      firstName: "required", 
      lastName: "required" 
     }, 
    }); 
});

.validate() should only used one time to intialize the form on DOM ready。在一個點擊處理程序中封裝一個插件的初始化是沒有意義的。該插件已經包含了所有內置的事件處理程序，這將觸發實際的驗證測試。

平原jQuery的例子：http://jsfiddle.net/RmG2g/

$(document).ready(function() { 
    $("#page2 form").validate({ ... }); 
});

但是，由於您使用jQuery Mobile的：

$(document).on('pageinit', function(){ // <-- you must use this to ensure the DOM is ready 

    $("#page2 form").validate({ 
     rules: { 
      firstName: "required", 
      lastName: "required" 
     }, 
    }); 

});

工作演示：http://jsfiddle.net/6FYyv/

對於jQuery Mobile的，你需要使用....

$(document).on('pageinit', function(){

，而不是

$(document).ready(function(){

參見：http://jquerymobile.com/demos/1.2.0/docs/api/events.html

重要：使用$(document).bind('pageinit')，不是$(document).ready()

您在jQuery中學到的第一件事就是調用 $(document).ready()函數中的代碼，以便在加載DOM時儘快執行所有操作。但是，在jQuery Mobile中，Ajax用於在導航時將每個頁面的內容加載到DOM中，DOM準備好的處理程序僅對第一頁執行。要在加載和創建新頁面時執行代碼，可以綁定到pageinit事件。

來源

2013-02-24 22:24:35 Sparky

謝謝，點擊是絕望的實驗，最後我的問題竟然是錯誤的標記，但pageinit是非常有用的，因爲我現在已經將所有的javascript切換到pageinit而不是文檔準備就緒。 – 2013-02-25 04:51:24

@IanHoar，很高興能幫到你。爲了讀者的利益，僅僅重申一下，只要包含'jQuery Mobile'，'pageinit'事件就可以使用。 – Sparky 2013-02-25 06:12:54

jQuery Mobile和jQuery驗證

回答

相關問題