How to clear jquery validate errors

Question

I'm hijaxing an existing form and POSTing to the server. jQuery validate does most of the validation but if validation fails on the server we return the errors to the client as JSON.

Below is the code that does that:

<script type="text/javascript">

    $(function () {

        $("form").submit(function (e) {
            var $form = $(this);
            var validator = $form.data("validator");

            if (!validator || !$form.valid())
                return;

            e.preventDefault();

            $.ajax({
                url: "@Url.Action("index")",
                type: "POST",
                data: $form.serialize(),
                statusCode: {
                    400: function(xhr, status, err) {                           
                        var errors = $.parseJSON(err);
                        validator.showErrors(errors);
                    }
                },
                success: function() {
                    // clear errors
                    // validator.resetForm();
                    // just reload the page for now
                    location.reload(true);
                }
            });
        });

    });

</script>

The problem is I can't seem to clear the validation errors if the POST is successful. I've tried calling validator.resetForm() but this makes no difference, the error messages added by the showError() call, are still displayed.

Note I'm also using the jQuery.validate.unobtrusive plugin.

Answer 1

May be I am wrong to clear the errors like this:

function clearError(form) {
    $(form + ' .validation-summary-errors').each(function () {
        $(this).html("<ul><li style='display:none'></li></ul>");
    })
    $(form + ' .validation-summary-errors').addClass('validation-summary-valid');
    $(form + ' .validation-summary-errors').removeClass('validation-summary-errors');
    $(form).removeData("validator");
    $(form).removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse($(form));
};

I tried answer given in the comment by AaronLS but not got the solution so I just do it like this.

Maybe helpful to someone.

Answer 2

Here's the code I ended up using to clear/reset all errors. It's possible there's some redundancy in there, but it's working for me.

function removeValidationErrors(frmId) {
    var myform = $('#' + frmId);
    myform.get(0).reset();
    var myValidator = myform.validate();
    $(myform).removeData('validator');
    $(myform).removeData('unobtrusiveValidation');
    $.validator.unobtrusive.parse(myform);
    myValidator.resetForm();
    $('#' + frmId + ' input, select').removeClass('input-validation-error');
}

Answer 3

The reason this is still an issue (even 6 years on) is that jQuery Validation doesn't have an event handler for when your form is valid; only for when it's invalid.

Unobtrusive Validation taps into the Invalid handler to add your errors to your Validation Summary elements. (Specifically, any element with data-valmsg-summary=true.) But because there's no Valid handler, there's no way for Unobtrusive Validation to know when they can be cleared.

However, jQuery Validation does allow you to supply your own showErrors method, which is called after every validation check, whether the result is valid or invalid. Thus, you can write a custom function that will clear those validation summary boxes if your form is valid.

Here's a sample that will apply it globally. (You could apply it to specific instances of your validators by using settings, but since I always want this functionality, I just put it in the defaults object.)

$.validator.defaults.showErrors = function () {
    if (!this.errorList.length) {
        var container = $(this.currentForm).find("[data-valmsg-summary=true]");
        container.find("ul").empty();
        container.addClass("validation-summary-valid").removeClass("validation-summary-errors");
    }

    // Call jQuery Validation's default showErrors method.
    this.defaultShowErrors();
};

This also has the benefit of clearing the validation summary box the moment your form is valid, instead of having to wait for the user to request a form submission.

Answer 4

$("#form").find('.field-validation-error span').html('')

Answer 5

You posted this a while ago, I don't know if you managed to solve it? I had the same problem with jQuery validate and the jQuery.validate.unobtrusive plugin.

After examining the source code and some debugging, I came to the conclusion that the problem comes from the way the unobtrusive plugin handles error messages. It removes the errorClass that the jQuery.validate plugin sets, and so when the form is reset, jQuery validate cannot find the error labels to remove.

I did not want to modify the code of the plugins, so I was able to overcome this in the following way:

// get the form inside we are working - change selector to your form as needed
var $form = $("form");

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

// clear errors from validation
$validator.resetForm();

note: I use the $ prefix for variables to denote variables that contain jQuery objects.