jquery驗證錯誤消息不隱藏，爲什麼

Question

我正在使用jquery驗證和jquery unobtrusive驗證插件。我試圖隱藏錯誤消息，但錯誤消息沒有隱藏。我創建了一個JS提琴：

Fiddle Link

以下是我在小提琴使用的代碼：

的Html

<form id="form"> 
    Name: 
    <input data-val="true" data-val-length="The field First Name must be a string with a minimum length of 3 and a maximum length of 15." data-val-length-max="15" data-val-length-min="3" name="FirstName" type="text" /> 
    <span class="field-validation-valid help-block" data-valmsg-for="FirstName" data-valmsg-replace="true"></span> 
</form> 
<button id="hide">Hide</button> 

隱藏

JS

$("#hide").click(function(){ 
    $("#form").data("validator").hideErrors(); 
}); 

我在這裏失蹤以及爲什麼hideErrors（）函數不工作？

編輯

我不知道爲什麼你們不守不顯眼的jQuery驗證考慮同時給予答案。幾乎所有的答案都是關注如何隱藏錯誤消息，而不用擔心現有的功能，如果我們只隱藏消息就可能會中斷。我已經提到，我想要的答案

爲什麼hideErrors（）函數的jquery驗證器對象不工作？

我還創建了一個最簡單的小提琴演示我的問題，check this。

Answer 1

如果你想隱藏驗證錯誤消息，比你應該使用resetForm功能，而不是hideErrors功能。正如他們在回答中提到的，resetForm內部調用hideErrors函數。

但這裏的扭曲來的時候，當你將嘗試使用resetForm功能也不會因爲這樣jquery.validate.unobtrusive插件工程工作。

jquery.validate.unobtrusive插件覆蓋errorClass和errorElementjquery.validate插件的性能。

從jquery.validate.unobtrusive插件代碼線路109

.... 
    if (!result) { 
     result = { 
      options: { 
       errorClass: "input-validation-error", 
       errorElement: "span", 
       errorPlacement: $.proxy(onError, form), 
    ... 

所以，當你將調用resetForm功能驗證的對象，jquery.validate插件無法找到錯誤標籤刪除所以驗證錯誤消息不會刪除。

現在你有兩個選項刪除錯誤信息：

選項 - 1

您可以編輯jquery.validate.unobtrusive插件代碼和替換errorClass和errorElement值與以下值：

errorClass: "error", 
    errorElement: "label", 

這些是默認值，其中jquery.validate插件使用。

選項 - 2

您可以編寫自己的代碼，這將這樣的伎倆，並通過這種方式，您不必修改插件代碼。 Here is the code which you can use很少的修改提到如下：

 // get the form 
     var form = $("#formId"); 

     // get validator object 
     var validator = form.validate(); 

     // get errors that were created using jQuery.validate.unobtrusive 
     var errors = form.find(".field-validation-error span"); 

     // trick unobtrusive to think the elements were succesfully validated 
     // this removes the validation messages 
     errors.each(function() { validator.settings.success($(this)); }) 

     //this is optional, only needed if you defined 
     //custom unhighlight function 
     if (validator.settings.unhighlight) { 
      for (i = 0, elements = validator.invalidElements() ; elements[i]; i++) { 
       validator.settings.unhighlight.call(validator, elements[i], validator.settings.errorClass, validator.settings.validClass); 
      } 
     } 

Answer 2

您可以使用$(".help-block").toggle();或$(".help-block").hide();來解決這個問題。

http://jsbin.com/leyacefi/10/edit?html,js,output

我做了一個解決方法。檢查是否符合你的需求：

$("#hide").click(function(){ 
    $(".help-block").hide(); 
}); 

$('#form').keyup(function(){ 
    $(".help-block").show(); 
}); 

http://jsbin.com/leyacefi/11/

要回答你的問題：

hideErrors呼籲this.addWrapper(this.toHide).hide();的功能，所以它首先運行，返回的背景和之後的功能addWrapper它正在調用hide函數。函數hide調用showHide函數，其中一個參數是elements。 elements.length將爲0，因此它將永遠不會到達將設置CSS的elem.style.display = show ? values[ index ] || "" : "none";。所以，財產永遠不會改變。

Answer 3

你的代碼應該是這樣的：

$(document).ready(function() { 
     $("#hide").click(function(){ 
      $("span.help-block").hide(); 
     }); 

}); 

Answer 4

我會建議你使用任何插件之前閱讀文檔。 如果你看到驗證器插件文件，它明確地表示

Validator 

The validate method returns a Validator object that has a few public methods that you can use to trigger validation programmatically or change the contents of the form. The validator object has more methods, but only those documented here are intended for usage 

的方法.hideErrors（）未在文檔中列出。所以按照文檔，你不應該使用它。

但在JavaScript（你可以說jQuery）很多都是可能的。所以即使他們不允許你在jQuery對象上調用它，你也可以在DOM上調用它。

只需使用像這樣。

$("#hide").click(function(){ 
    $("#form").data("validator")[0].hideErrors(); 
});