Jquery validation error messages are not hiding, why

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.

Answer 1

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