Jquery验证错误消息没有隐藏，为什么

Question

我正在使用 jquery 验证和 jquery 不显眼的验证插件。我试图隐藏错误消息，但错误消息没有隐藏。我创建了一个 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 不显眼的验证。几乎所有的答案都只是关注如何隐藏错误消息，而不用担心如果我们只是隐藏消息可能会破坏现有功能。我已经提到我想要的答案

为什么 jquery 验证器对象的 hideErrors() 函数不起作用？

我还创建了一个最简单的小提琴来演示我的问题，check this。

Answer 1

如果你想隐藏验证错误信息，你应该使用 resetForm 函数而不是 hideErrors 函数。正如其他人在他们的回答中提到的那样，resetForm 在内部调用 hideErrors 函数。

但问题来了，当您尝试使用 resetForm 函数时，由于 jquery.validate.unobtrusive 插件的工作方式，它不会工作。

jquery.validate.unobtrusive 插件覆盖了 jquery.validate 插件的 errorClass 和 errorElement 属性。

来自 jquery.validate.unobtrusive 插件代码 Line-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

我建议您在使用任何插件之前阅读文档。 如果您看到验证器插件文档，则清楚地提到了

    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();
});

Answer 4

您的代码应如下所示：

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

});