2

我目前正在開發一個移動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調用初始化。在第一個成功完成的調用中,插件創建了一個綁定到表單的驗證器,並緩存驗證器。在第二次調用中,我需要它將一個新的驗證器綁定到新的表單,而不是將舊的驗證器(綁定到舊錶單)返回給我。

+1

您是否嘗試將所有驗證JS拉入一個'validate.js'文件,確保鏈接到所有需要它的頁面上的此文件?這樣,當顯示第一個登錄頁面時,所有的JS都會被加載,並會在整個其他頁面中保留下來,並且會根據需要提供。 – adamdehaven 2013-03-21 12:02:57

+0

'jquery.validate.min.js'已經加載。 JQM將腳本和css加載到第一頁,然後當它更改頁面時,它僅注入現有頁面上的內容。頭部中的腳本似乎被緩存,但無論如何,我在每個頁面中都複製了每個腳本標記。 – 2013-03-21 13:12:28

+1

我不是說每個頁面都會插入'validate'插件。我的意思是,包含你可能需要的每個頁面的代碼,(例如'$(「#id_index_form」)。validate({.....'用於其他文件中的每個驗證規則/方法,以及鏈接到這個JS文件在每個頁面上都有意義嗎? – adamdehaven 2013-03-21 14:03:08

回答

1

解決:

什麼hapenning:我不知道。我只知道這個插件綁定到一個表單,當validate被調用時,只要窗體在DOM中,它就保持綁定。它也緩存驗證器,所以隨後通過同一表單調用validate將返回相同的驗證器。

我做了什麼:在切換到下一頁之前,我從DOM中刪除表單。

+0

'.validate()'被稱爲_once_並且只有一次_initialize_特定的目標表單。一旦初始化,它不會再被調用。所以是的,如果您刪除表單或添加其他表單,則需要重新初始化。 – Sparky 2013-03-21 16:01:10

+0

問題是如果您從DOM中刪除表單,您將不再有ajax轉換。這是給最終用戶一種真實的本地應用程序的感覺。有沒有其他方法來強制jQuery驗證插件重新啓動或重置驗證器? – Ehsan 2014-09-11 17:22:04