I was looking around for a way to reset form Unobtrusive jQuery validation. In other words, I want to reset everything to default. Unobtrusive validation closely relates to data annotations because they hold the validation rules. For example, you can set up min or max length a text box field. More importantly, how to clear unobtrusive jQuery validation, we learn that it doesn’t have any way to reset the UI after errors occur. However, you can safely use:

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

The best example I found online was on John Culviner blog. It wasn’t exactly what I was looking for, but it was a good start. He resets the form by using a button and attributes, I need a function that does that, so I create a plugin that clears the fields on demand.

Clear Reset Form Unobtrusive jQuery validation

The clear reset form unobtrusive jQuery validation plugin itself is quite simple. It’s wrapped inside an IIFE function or Immediately Invoked Function Expression. To use it, start with writing it in the following shorthand way.

(function () { 
// logic here 
})();

Inside the IIFE, I created a function called “clearForm” that takes options. Looking closely at the $.extend method, I tell it to find a form on the page and use that as it’s Id. Please let me know if I’m doing double work here because I’m also setting the form ID from options (you will see in the complete example).

$.fn.clearForm = function(options) {
    formId: this.closest('form')
}

Moving to the part of reset form unobtrusive jQuery validation, I make the following calls. The first call puts the structure into a clean state.

$form.validate().resetForm();

Afterword, if you’re using MVC, you will want to reset the validation summary. The following is an optional step.

 $form.find("[data-valmsg-summary=true]")
    .removeClass("validation-summary-errors")
    .addClass("validation-summary-valid")
    .find("ul").empty();

Finally, if you’re using MVC, you will want to reset all the error fields and finish by returning the form.

//reset unobtrusive field level, if it exists 
$form.find("[data-valmsg-replace]")
    .removeClass("field-validation-error")
    .addClass("field-validation-valid")
    .empty();

return $form;

Final Thoughts

For your convenience, I’ve put together the JavaScript. To use it, you will need to call $(“#signupform”).clearForm(); I hope this script makes your life a tad bit easier while working to Reset Form Unobtrusive jQuery validation.

(function($) {

    $.fn.clearForm = function(options) {

        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.

            formId: this.closest('form')

        }, options);

        var $form = $(settings.formId);

        //reset jQuery Validate's internals
        $form.validate().resetForm();

        //reset unobtrusive validation summary, if it exists
        $form.find("[data-valmsg-summary=true]")
            .removeClass("validation-summary-errors")
            .addClass("validation-summary-valid")
            .find("ul").empty();

        //reset unobtrusive field level, if it exists
        $form.find("[data-valmsg-replace]")
            .removeClass("field-validation-error")
            .addClass("field-validation-valid")
            .empty();

        return $form;
    };

}(jQuery));

If you want to share your judgment on how to Reset Form Unobtrusive jQuery validation:

• Leave a comment over the “What’s Crackin’ \ (•◡•) /” section below.
• Share this show on Twitter, Google+ or Pinterest