MVC3不顯眼的驗證移動驗證來定製元素

Question

了Serverside我渲染hiddenfield，我然後使用稱爲Flexbox的一個jquery插件來創建組合框，它創建一個輸入元件的客戶端，並複製所選擇的ID（未文本）來隱藏字段一旦你在框中選擇了一些東西。

的問題是驗證代碼添加了一個類名的hiddenfield什麼是錯與驗證，我希望它被添加到輸入要素，我可以以某種方式收聽時增加了類名，或somehove勾成該事件並將類名移至輸入字段。

這工作，但它作爲地獄醜陋，想一個更好的解決方案

var oldClass = $hdn.attr('class'); 

setInterval(function() { 
    if (oldClass != $hdn.attr('class')) { 
     $input.removeClass(oldClass); 
     oldClass = $hdn.attr('class'); 
     $input.addClass($hdn.attr('class')); 
    } 
}, 200); 

感謝。

Answer 1

由於Counsellorben我發現了一個很好的解決方案，我做了一個稍微不同的方式，但。 首先，我重寫了在document.ready構造的主對象構造函數中的默認方法。的document.ready然而爲時已晚，做從form.valid（觸發驗證時，但它會做一個提交（很奇怪）此代碼的工作既爲提交和腳本觸發時，特里格你的方法不會觸發）

(function() { 
    var highlight = $.validator.defaults.highlight; 
    var unhighlight = $.validator.defaults.unhighlight; 

    $.validator.setDefaults({ 
     highlight: function (element, errorClass, validClass) { 
      if ($(element).attr("data-val-visualId") != null) { 
       element = $("#" + $(element).attr("data-val-visualId"))[0]; 
      } 
      highlight(element, errorClass, validClass); 
     }, 
     unhighlight: function (element, errorClass, validClass) { 
      if ($(element).attr("data-val-visualId") != null) { 
       element = $("#" + $(element).attr("data-val-visualId"))[0]; 
      } 
      unhighlight(element, errorClass, validClass); 
     } 
    }); 
})(); 

Answer 2

在那裏我有正在驗證一個隱藏的元素，我添加了一個自定義屬性，data-val-visibleid。然後，在jquery.validate.js，我通過在這兩個功能的末尾添加以下修改highlight和unhighlight功能：

if ($(element).is(":hidden")) { 
    var targetId = $(element).attr("data-val-visibleid"); 
    $("#" + targetId).addClass(errorClass).removeClass(validClass); 
} 

有些人不喜歡jquery.validate.js染指，但它通常是最容易的方法來實現這樣的自定義。

UPDATE

我做了一些研究，並發現jquery.validate有一個漂亮的setDefault方法，在這裏你可以覆蓋默認的功能，如高亮（）和unhighlight。在加載其他腳本後，將以下內容添加到您的頁面：

$.validator.setDefaults({ 
    highlight: function (element, errorClass, validClass) { 
     $(element).addClass(errorClass).removeClass(validClass); 
     if ($(element).is(":hidden")) { 
      var targetId = $(element).attr("data-val-visibleid"); 
      $("#" + targetId).addClass(errorClass).removeClass(validClass); 
     } 
    }, 
    unhighlight: function (element, errorClass, validClass) { 
     $(element).removeClass(errorClass).addClass(validClass); 
     if ($(element).is(":hidden")) { 
      var targetId = $(element).attr("data-val-visibleid"); 
      $("#" + targetId).addClass(errorClass).removeClass(validClass); 
     } 
    } 
}); 

這將覆蓋默認功能，而不更改基礎腳本。

Answer 3

我發現這兩個答案都非常有幫助，只是想爲使用驗證插件1.9.0版本的任何人添加，您將需要覆蓋忽略隱藏字段的默認行爲，如其他帖子中所述：jQuery Validate - Enable validation for hidden fields