Fork me on GitHub

Clear/Reset MVC 3 Form and Unobtrusive jQuery Client Validation 14



So today I needed to clear a MVC 3 form  with unobtrusive client validation applied to it via jquery.validate.js & jquery.validate.unobtrusive.js. This doesn’t seem too tricky initially until I realized that doing a form reset via a <input type=”reset”/> or a javascript form.Reset() doesn’t eliminate any jQuery validation messages that were displayed! Take a look below at a weird looking example form below where I did this:

  • Entered a user name
  • Clicked “LOGIN”
  • JavaScript presented me with errors indicating a password is required
  • Clicked “RESET”


I would expect the form to look more like this after clicking “RESET”, basically reset the form to it’s initial state:


Solution, Basic Example

I did some digging online and didn’t find any satisfying answers to this question so I wrote two jQuery plugins that either clear validation, reset the form (for use with NON input type=submit) or do both. Here’s some basic examples:




Solution, Better Example

Of course instead of having inline “onclick”s you could put a live handler in a core JS file to get this sort of behavior across a whole site. Also note for this example you would need to have a class of “form-reset” on any form resetting elements (not a reset input though):




Here are the same HTML examples with the above live handler (a bit cleaner):



The jQuery Plugin

Finally here is the required jQuery plugin code for it all to work:




Enjoy! Hopefully this makes working with jQuery Unobtrusive Validation a bit easier.

14 thoughts on “Clear/Reset MVC 3 Form and Unobtrusive jQuery Client Validation

  1. Reply Alex Mar 22,2021 6:10 am

    Tried every other solution. Calling $form.validate().resetForm(); alone wouldn’t clear the error messages. We have to remove the errors too. This worked perfectly! Thank you!

  2. Reply simi Feb 24,2017 1:39 pm

    Thanks this helped me.

  3. Reply Bibin K Onankunju Apr 6,2016 8:04 am

    Thanks. This helped me a lot. Lol. :)

  4. Pingback: How To Fix Clear Requiredfieldvalidator Error Message Jquery in Windows

  5. Reply Johnd514 Sep 3,2014 12:05 pm

    hi! , Everyone loves a persons writing quite definitely! promote many of us keep up a correspondence more info on your own document for Yahoo? I need a pro for this dwelling to unravel this dilemma. Could be that is definitely a person! Looking forward to search an individual. cbggfkgceddg

  6. Reply Paul P Jun 11,2014 6:15 am

    Great post, it helped my on a page with tabs where validation reset was needed

  7. Reply judi Jun 2,2014 12:49 am

    perfect! thank u very much

  8. Pingback: Clear Reset Form Unobtrusive jQuery validation

  9. Reply Dhaval Jan 23,2014 12:38 am

    You are life saver. Excellent….

  10. Reply Bipin Poul Dec 16,2013 12:06 am

    Hi John
    Perfect really well..Thanks…

  11. Reply Java2fun Aug 15,2013 11:16 am

    Your code is awesome.

  12. Reply Java2fun Aug 15,2013 11:15 am

    Your code is awesome. :)

  13. Reply Bhupendra Guhe Feb 15,2012 12:44 am

    Hi Please check this code.

    this code would be work for any page, code will clear html control as well as jquery error message

    /******************************************Clear form elements**********************************************************/
    function clear_form_elements(ele) {

    $(ele).find(‘:input’).each(function() {
    switch(this.type) {
    case ‘password’:
    case ‘select-multiple’:
    case ‘select-one’:
    case ‘text’:
    case ‘textarea’:
    case ‘checkbox’:
    case ‘radio’:
    this.checked = false;

    $(‘input[type=button]’).live(‘click’, function () {
    /*******************************************helping method for clearing form- clear jquery validation error*************/

    (function ($) {

    //re-set all client validation given a jQuery selected form or child
    $.fn.resetValidation = function () {

    var $form = this.closest(‘form’);

    //reset jQuery Validate’s internals

    //reset unobtrusive validation summary, if it exists

    //reset unobtrusive field level, if it exists

    return $form;

    //reset a form given a jQuery selected form or a child
    //by default validation is also reset
    $.fn.formReset = function (resetValidation) {
    var $form = this.closest(‘form’);


    if (resetValidation == undefined || resetValidation) {

    return $form;


    [b]Copy and paste this code in your javascript file and call the method on button click event[/b]

    <input id="Cancel" onclick="clear_form_elements(this.form)" type="button" value="Cancel" />

  14. Reply Timir Panchal Nov 16,2011 10:50 am


    I used it and it is working like a charm!!!

Leave a Reply