Fork me on GitHub

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



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.

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 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’:
    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" />

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


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

Leave a Reply