我目前正在開發一個移動html5項目。我正在使用this jQuery驗證插件來驗證具有表單的登錄屏幕。我還使用jQuery Mobile和單頁模板(我在不同的html文件中有頁面,但是當更改頁面時,JQM讀取文件並將新頁面內容注入DOM)。林迫使JQM以在應用程序的每個頁面的變化重新加載頁面:jQuery驗證插件JQM頁面更改後無法工作
$.mobile.changePage("pageurl", {reloadPage: true});
的第一頁是登錄屏幕用一個簡單的形式爲用戶名和密碼。在第一個鏡頭中一切順利:驗證插件會提示是否按下了提交按鈕,並且某些字段是空的。如果所有字段都正確並按下提交,我會對WS進行一些Ajax調用,將數據保存到數據庫中,並顯示下一頁。
這是登錄屏幕代碼:
$(document).on("pageinit", "#login_screen", function() {
//This event fires every time we show this JQM "page".
$("#id_index_form").validate({
submitHandler : function(form) {
user = form.user.value;
password = form.psw.value;
login();
}
});
});
function login(){
//Calls the login WS (ommited)
//if login went ok, inject next page in DOM using ajax
$.mobile.changePage("nextpage.html", {reloadPage: true});
}
一個重要的事情是,我不能使用的形式內置的機制,使定製login
函數被調用來代替。
當在下一屏幕,如果用戶返回到登錄,我再改頁:
$.mobile.changePage("login.html", {reloadPage: true});
而且現在的驗證插件只是沒有任何失效。它不驗證,當提交被按下時,表單被清除並且什麼也沒有發生。但是,如預期的那樣,mobileinit事件再次被觸發。控制檯中沒有錯誤。
有什麼我失蹤了嗎?我怎樣才能「重新啓動」插件?也許它仍然認爲前面的電話沒有完成?
在此先感謝。
UPDATE:
我調試的非縮小的插件js文件,它看起來像問題是它在validate
調用初始化。在第一個成功完成的調用中,插件創建了一個綁定到表單的驗證器,並緩存驗證器。在第二次調用中,我需要它將一個新的驗證器綁定到新的表單,而不是將舊的驗證器(綁定到舊錶單)返回給我。
您是否嘗試將所有驗證JS拉入一個'validate.js'文件,確保鏈接到所有需要它的頁面上的此文件?這樣,當顯示第一個登錄頁面時,所有的JS都會被加載,並會在整個其他頁面中保留下來,並且會根據需要提供。 – adamdehaven 2013-03-21 12:02:57
'jquery.validate.min.js'已經加載。 JQM將腳本和css加載到第一頁,然後當它更改頁面時,它僅注入現有頁面上的內容。頭部中的腳本似乎被緩存,但無論如何,我在每個頁面中都複製了每個腳本標記。 – 2013-03-21 13:12:28
我不是說每個頁面都會插入'validate'插件。我的意思是,包含你可能需要的每個頁面的代碼,(例如'$(「#id_index_form」)。validate({.....'用於其他文件中的每個驗證規則/方法,以及鏈接到這個JS文件在每個頁面上都有意義嗎? – adamdehaven 2013-03-21 14:03:08