Fork me on GitHub

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

by

Intro

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”

actual-behavior

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

desired-behavior

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.

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

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

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

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

  3. 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

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

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

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

    perfect! thank u very much

  6. Pingback: Clear Reset Form Unobtrusive jQuery validation

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

    You are life saver. Excellent….

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

    Hi John
    Perfect code..works really well..Thanks…

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

    Your code is awesome.

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

    Your code is awesome. :)

  11. 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’:
    $(this).val(”);
    break;
    case ‘checkbox’:
    case ‘radio’:
    this.checked = false;
    }
    });

    $(‘input[type=button]’).live(‘click’, function () {
    $(this).resetValidation();
    });
    }
    /*******************************************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
    $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;
    };

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

    $form[0].reset();

    if (resetValidation == undefined || resetValidation) {
    $form.resetValidation();
    }

    return $form;
    }
    })(jQuery);

    /****************************************************************************************************************/

    [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" />

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

    John,

    I used it and it is working like a charm!!!
    Thanks,
    Timir

Leave a Reply