Question

我正在使用jquery验证和jquery不显眼的验证插件。我试图隐藏错误消息，但错误消息没有隐藏。我创造了一个小提琴手：

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

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 validator对象的hideErrors（）函数不起作用？

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

Answer 1

如果要隐藏验证错误消息，则应使用 resetForm 函数而不是 hideErrors 函数。正如他们的答案中提到的那样， resetForm 在内部调用 hideErrors 函数。

但是，当你尝试使用 resetForm 函数时，它会发生变化，因为 jquery.validate.unobtrusive 插件的工作方式不起作用。

jquery.validate.unobtrusive 插件会覆盖 jquery.validate 插件的 errorClass 和 errorElement 属性。< / p>

来自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

您的代码应如下所示：

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

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

4 个答案: