多次驗證器調用動態添加的內容使用不顯眼

Question

這是一個典型的問題，即當您向JavaScript添加內容到JavaScript時，即使您調用 $ .validator.unobtrusive.parse（「form」）;

好吧，這裏是很好的解決方案：解析之前剛剛乾淨的信息：

$("form").removeData("validator"); 
$("form").removeData("unobtrusiveValidation"); 
$.validator.unobtrusive.parse("form");` 

這是相當不錯的，而且似乎真的工作。但！ 每個驗證被稱爲多次調用該塊：

$("form").removeData("validator"); 
$("form").removeData("unobtrusiveValidation"); 
$.validator.unobtrusive.parse("form"); 

您可以通過創建自定義的驗證並設置內部或調試輸出斷點很容易地檢查這種情況：

jQuery.validator.addMethod("checksalary", 
    function (value, element, param) { 
    return (!isNaN(value) && parseInt(value) > 0) || $("#" + param).attr('checked'); 
}); 

jQuery.validator.unobtrusive.adapters.add 
("checksalary", ["param"], function (options) { 
    options.rules["checksalary"] = options.params.param; 
    options.messages["checksalary"] = options.message; 
}); 

這看起來真的如果你的驗證器調用了幾次而不是一次，那麼這是非專業的。

在調用parse（）之前是否應該清除其他任何信息？

假設你已經調用了parse（）100次。我認爲客戶可以清楚地看到這種開銷。

UPDATE 好吧，我可以調試腳本tonns，結果發現，即使我們的形式清潔驗證信息，我們仍然沒有清洗這種綁定，在jquery.validate.js

引起線53

this.submit(function (event) { 
     if (validator.settings.debug) 
     // prevent form submit to be able to see console output 
      event.preventDefault(); 
... 

所以我創建的臨時醜陋修復這種情況下，適用於現在，但我相信應該有更好的周圍的方式，像更新驗證對象，而不是創造新的：

var validator = $.data(this[0], 'validator'); 
    var skipReAttach = false; 
    if (validator) { 
     //return validator; 
     skipReAttach = true; 
    } 

    validator = new $.validator(options, this[0]); 
    $.data(this[0], 'validator', validator); 

    if (validator.settings.onsubmit) { 

     // allow suppresing validation by adding a cancel class to the submit button 
     this.find("input, button").filter(".cancel").click(function() { 
      validator.cancelSubmit = true; 
     }); 

     // when a submitHandler is used, capture the submitting button 
     if (validator.settings.submitHandler) { 
      this.find("input, button").filter(":submit").click(function() { 
       validator.submitButton = this; 
      }); 
     } 

     // validate the form on submit 
     if (skipReAttach) 
      return validator; 

     this.submit(function (event) { 
      if (validator.settings.debug) 
      // prevent form submit to be able to see console output 
       event.preventDefault(); 

當然 - 現在只應調用 $.validator.unobtrusive.parse("form"); 。

但是，解決這個問題的好方法是什麼？

Answer 1

我發現使用this solution提供了很多幫助的不太優雅的解決方案。迄今爲止，對我來說效果不錯，儘管還沒有經過徹底的測試。

代替使用：

$("form").removeData("validator"); 
$("form").removeData("unobtrusiveValidation"); 
$.validator.unobtrusive.parse("form"); 

使用以下代碼：

function resetValidationAttributes(parentContainer) { 
    $(parentContainer).find(':input[data-val = true]').each(function() { 
     // 
     $.validator.unobtrusive.parseElement(this, true); 

     var form = $(this).first().closest('form'); 

     var unobtrusiveValidation = form.data('unobtrusiveValidation'); 
     var validator = form.validate(); 

     $.each (unobtrusiveValidation.options.rules, function (elname, elrules) { 
      if (validator.settings.rules[ elname] == undefined) { 
       var args = {}; 
       $.extend(args, elrules); 
       args.messages = unobtrusiveValidation.options.messages[elname]; 
       $('[name="' + elname + '"]').rules("add" , args); 
      } else { 
       $.each(elrules, function(rulename, data) { 
        if(validator.settings.rules[elname][rulename] == undefined) { 
         var args = {}; 
         args[rulename ] = data; 
         args.messages = unobtrusiveValidation.options.messages[elname][rulename]; 
         $('[name="' + elname + '"]').rules("add", args); 
        } 
       }); 
      } 
     }); 
    }); 
} 

它接受所述動態內容被加載到容器中，然後搜索在該容器中的任何輸入。對於每個輸入，它調用函數調用中指定的真實parseElement（查看不顯眼的驗證文件以獲取更多信息）。最後，它通過表單上的驗證器，並將該字段添加到規則中（如果它不存在）。