Question

I am using jquery validation and jquery unobtrusive validation plugins. I am trying to hide error message, but error message are not hiding. I have created a js fiddle:

Fiddle Link

Following is the code which i used in the fiddle:

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>

Hide

JS

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

What i am missing here and why hideErrors() function are not working ??

Edit

I don't know why you guys are not keeping jquery unobtrusive validation in mind while giving answers. Almost all answer are just focusing on how to hide error messages without worrying about the existing functionality which could be break if we just hide the message. I already mention that i want the answer of

Why hideErrors() function of jquery validator object is not working ?

I have also created a simplest possible fiddle which demonstrate my problem, check this.

Was it helpful?

Solution

If you want to hide validation error messages, than you should use resetForm function instead of hideErrors function. As other mentioned in their answers, resetForm internally call hideErrors function.

But here's the twist comes, when you will try to use resetForm function it will not work because of the way jquery.validate.unobtrusive plugin works.

jquery.validate.unobtrusive plugin override the errorClass and errorElement property of jquery.validate plugin.

From jquery.validate.unobtrusive plugin code Line-109

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

So when you will call resetForm function on validator's object, jquery.validate plugin can't find error labels to remove so validation error message will not remove.

Now you have two options to remove error messages:

Option - 1

You can edit jquery.validate.unobtrusive plugin code and replace errorClass and errorElement values with the following values:

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

These are the default values which jquery.validate plugin use.

Option - 2

You can write your own code which will do the trick and by this way you do not have to modify the plugin code. Here is the code which you can use with little modifications mentioned below:

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

OTHER TIPS

You could use $(".help-block").toggle(); or $(".help-block").hide(); to fix this.

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

I've made a workaround. Check if it fit to your needs:

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

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

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

To answer your question:

The function hideErrors is calling this.addWrapper( this.toHide ).hide(); so it first runs the function addWrapper that returns the context and after that it is calling the hide function. The function hide calls the showHide function and one of the paramets is elements. elements.length will be 0 and therefore it will never reach till the elem.style.display = show ? values[ index ] || "" : "none"; where the CSS will be set. So, the property will never change.

I would recommend you to read the documentation before using any plugin. If you see the validator plugin documentation, it is clearly mentioned that

    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

The method .hideErrors() is not listed in the documentation. So as per documentation, you shouldn't use it.

But in javascript(you can say jquery) many are possible. So even if they dont allow you to call it on the jquery object, you can call it on DOM .

Simply use like this.

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

Your code should be like the following:

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

}); 
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top