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:{
    ......
   }
  });
 }
}

2012/04/18 補充:
也許可以參考 [jQuery Plugin] jQuery Validator: Dynamic message

沒有留言: