搞搞就懂

問題描述

客戶希望在表單上透過動態的方式加入輸入框，並且可不斷的擴充增加元素；想當然爾，直接使用Ajax技術將所需之輸入框不斷的加入目標位置中，即達成客戶的需求。就在一切都很美好的情況下，針對各輸入框進行基本的前端驗證測試時卻發現，透過Ajax動態載入的輸入框之驗證會失效。

原因分析

仔細了解jQuery運作機制後發現，它會在網頁完全載入後呼叫$.validator.unobtrusive.parse(document)來解析所有需要檢核的元素；因此意味著後來透過Ajax載入的元素是不會被納入檢核範圍中的，所以必須強迫將所有須檢核之元素重新納入jQuery之檢核範圍中。詳細原理可參考暗黑執行緒文章謙卑式jQuery檢核範例-動態變更檢核設定有進一步的探討及說明。

解決方案

在送出資料前，移除所有的檢核設定再重新解析需要納入驗證的元素即可。

function ReParseValidation() {
    var forms = $("body").find("form");
    for (var i = 0; i < forms.length; i++) {
        var form = $(forms[i]);

        // 移除所有的檢核設定
        form.removeData("validator")
            .removeData("unobtrusiveValidation");

        // 重新解析元素的data-val-*標示
        $.validator.unobtrusive.parse(form);
    }
}

參考資料

http://stackoverflow.com/questions/14250032/jquery-validation-of-a-form-inserted-into-dom
http://blog.darkthread.net/post-2011-08-02-unobtrusive-jq-vald-dynamic.aspx

希望此篇文章可以幫助到需要的人

若內容有誤或有其他建議請不吝留言給筆者喔 !