Is there a function in jquery.validate that will reset a single field like resetForm does for a form?

Question

I want to call a jquery function to manually remove errors from a single field and reset the error markup. Is there a function that does this that would be similar to the resetForm function?

Solution 1

this resets the entire form

var validator = $("#myform").validate();
validator.resetForm();

this will reset only the name element

$("#skip").click(function() {
   var rules = $("#name").removeAttrs("min max"); // remove min and max
   $("#form").submit(); // submit, as there are no attributes, it will not have an error
   $("#name").attr(rules); // add it again so you can validate it
});

Solution 2

You can do the following to validate a single field:

$('#your_field').valid();

Maybe it will help someone :-)

Thanks!

Solution 3

Can't find anything built in to the validation library but this hack works:

$('#email').removeClass('error').next('label.error').remove();

Solution 4

This functionality is possible via focusCleanup: true option and triggering focusin event on desired element. But it is not always desirable to trigger this event. So apparently, you can use plugin’s internal code which is running on focusin and invoke it externally like so:

/*get your element and containing validated form*/
var $that = $('#desired_elemenet');
var $form = $that.closest('form');

/*get validator object for the form*/
var validator = $form.validate();

/*use internal code of a plugin to clear the field*/
if (validator.settings.unhighlight) {
    validator.settings.unhighlight.call( validator, $that[0], validator.settings.errorClass, validator.settings.validClass );
}
validator.hideThese( validator.errorsFor( $that[0] ) );

View more solutions

Comments

[balexandre]

if the answer is not useful, tell us why please. Don't downvote without a reason...

[David_001]

The question asks to remove errors from a single field: the proposed solution doesn't do that. It validates the entire form, and doesn't remove the existing errors.

[David_001]

Well I didn't say I downvoted, but that's irrelevant anyway, if a solution is wrong it should be downvoted and there's no requirement for an alternative to be left. As for your solution, I just tried it, and indeed it doesn't work, as I said before it's going to validate the entire form as soon as you click on the "skip" element, and there's no code there to clear any existing errors. See jsfiddle.net/9rNv5. If you have a working solution it may be worth expanding on your answer.

[balexandre]

true if: if a solution is wrong, but it was not wrong by the time of the answer (2011) as that was the only way to accomplish it.

[David_001]

I believe you're wrong on a number of counts. Firstly, the question is still a valid question today, and the solution posted will not work using tools used today, hence the solution is invalid. Secondly, whilst you may be correct that this worked 3 years ago, I don't believe this to be the case. The solution does not work using earliest version of jquery on jsfiddle (1.6.4), released in September 2011, and the version of jquery validate available at that time. Your solution does a $("form").submit(), which causes the entire form to be validated - I don't see how this could ever work.

[CodeNotFound]

This is the cleanest way to reset the element at this time :)

[ds00424]

This worked for me. But note that the valid() call must not be called before validate() setup is called or bad/strange things happen.

[Haydar]

Agree with David_001

[balexandre]

@David_001 a bit more attention will tell you that removeAttrs were removed in 2015 but you can see the source code for 1.11.1 still existed ... you can also see that the link I show points to an unexisting page as removeAttrs are no longer is supported. And yes even today you can submit a form without actually causing it to submit.

[Kunal Rajput]

year 2020 $('#email').removeClass('error').next('span.error').remove()‌​;