黑毛到白毛的攻城獅之路: jQuery validate 套件的多國語言：更換 message 內容

2011年10月29日星期六

jQuery validate 套件的多國語言：更換 message 內容

在我們的專案中，由於語言資料已經寫在特定的檔案內
因此似乎不適用 jQuery validate 套件內建的 localization 方法
（我查到的資料好像都是說要把 message 寫在指定的 message.js 裡？）

要讓 error message 跟著使用者選取的語言更換，容易想到的可能作法有三種：
1、更換語言時讓整個網頁重新整理。
2、更換語言時把 validate 套件的 message dictionary 內容置換掉。
3、重新初始化 validate 套件。

其中 1 被主管打槍，主管要求我們不准重新整理網頁
2 找不到方法...（其中 disctionary 這個概念是搜尋時看到有人這麼說的，實際上我原本一直以為 validate 套件是需要時即時去讀字串的）
3 就是本篇的重點了～雖然是個笨一點的方法，但總是能夠做到效果....

參考資料：How do I remove jQuery validation from a form?
上述連結的回應中提到的方法可以刪除現有的 validator
刪除後再重新呼叫一次 validator 就可以讓它重新初始化、重讀一次語言的資料了。

範例：

        
          
          
              
              // 刪除 validator
$.removeData(("#form").get(0), "validator");
// 重新初始化 validator
$("#form").validate({
　rules:{
　　......
　},
　messages:{
　　......
　},
　submitHandler: function(form) {
　　......
　}
});

            

        
      

2011/11/01 補充：
後來發現上面的作法會造成事件重複註冊的問題
用 removeData 刪除 validator 時，並不會一併把註冊的 submitHandler 刪掉
所以重新註冊 validator 以後 submitHandler 會被重複註冊
表單送出時就會執行好幾次的 submitHandler。

目前用的解決方法是.....有點爛的方法 XD
就記一個 boolean，只有第一次註冊 validator 時要一起註冊 submitHandler
code 如下：

        
          
          
              
              var isInitialed = false;
 
function initialValidator () {
　if( !isInitialed ) {
　　// 初始化 validator
　　$("#form").validate({
　　　rules:{
　　　　......
　　　},
　　　messages:{
　　　　......
　　　},
　　　submitHandler: function(form) {
　　　　......
　　　}
　　});
　　isInitialed = true;
　}
　else {
　　// 刪除 validator
　　$.removeData(("#form").get(0), "validator");
 
　　// 重新初始化 validator
　　$("#form").validate({
　　　rules:{
　　　　......
　　　},
　　　messages:{
　　　　......
　　　}
　　});
　}
}

            

        
      