Reset validation (clear error messages)

[Magnanimity]

This is not really an issue, but I cannot seem to find an easy way to do this. I am using a form in a modal for record add/edits. If the content of the form gets populated dynamically by means of a record edit, the error messages from the previous validation still shows. I would like to clear all validation messages through jQuery. How do I do this?

[FDVS]

You can trigger the blur event on the form elements that you need re-validation after they are populated.
$( "#target" ).blur(); // ~~~~http://api.jquery.com/blur/
If the validation of the new elements is successful it will clear all errors, if something needs attention they'll receive new error messages.

[Magnanimity]

Thank you, but that is not exactly what I am looking for. My functionality allows you to also "reset" the form, which makes it a blank form again. I would like all validation messages to disappear until a field is filled in or "Submit" is clicked on, like the form was initially on page load. If I follow your instruction, all fields with length > 0 validation will still show error messages as these fields are empty.

[FDVS]

Well, 'length = 0' but yes, I'm following your reasoning. So I'm guessing that you're looking for:

$( ".form-error" ).remove();

And all elements with that class will be removed, I'm just not sure if it will fire the validation again. You'll need to test it.

[Magnanimity]

Thank you for your help thus far. $( ".form-error" ).remove(); removed the validation error messages. However, the text box borders are still red. Even if I do the following:

$('.error').removeAttr('style');
$('.error').removeAttr('data-validation-current-error');
$('.error').removeClass('error');

The textbox borders are still red. Although they do go from a bright red to a more maroon red. I have removed all additional attributes and classes from the input so that it looks just like it looked initially, but the border remains. This is acceptable for now, but it would be nice if the validation had some kind of reset function to do all of this for you when you reset the form.

[victorjonsson]

I'm thinking on implementing this so that the error messages and styles will be removed when you call the native function reset on a form. Something like:

$('form').on('reset', function() {
  var $form = $(this);
  $form.find('.error,.valid').css('border-color', '').removeClass('error').removeClass('valid');
  $form.find('.form-error').remove();
});

// Then you could do this to remove all error messages and error styles
document.getElementById('my-form').reset(); 

[Magnanimity]

Thank you, I'm sure that would help a lot. :)

[victorjonsson]

This is fixed as of version 2.1.38. http://formvalidator.net/#configuration