Reset validation and clear validation message for Asp.Net MVC custom validation

Question

I'm using MVC 3 with jQuery 1.7.2 and I've implemented some custom validation on client and server side to validate that a certain textarea has text if a checkbox is checked.

My client side code to implement unobstrusive validation looks like this:

 $.validator.addMethod("requiredif", function (value, element, params) {
    if (value) {
      var id = '#' + params["otherproperty"];
      var control = $(id);
      if (control.val() == '') {
        return false;
      }
    }

    return $.validator.methods.required.call(this, value, element, params);
});

$.validator.unobtrusive.adapters.add("requiredif", ["otherproperty"], function(options) {
   options.rules["requiredif"] = options.params;
   options.messages["requiredif"] = options.message;
});

My problem is that even though the validation fires if I subsequently go back and untick the checkbox (i.e. text is no longer required), the validation message stays put and validation is not cleared.

I have tried the following to clear the validation:

 $('#Dashboard').on('change', '#Damaged', null, function () {
   var validator = $('#Gridform').validate();
   validator.resetForm();
 });

But this doesn't make any difference.

What I would like is for the validation to work the same as the standard validation does i.e. when I untick the checkbox or enter content into the textarea the validation is cleared/reset.

Answer 1

Try this solution, it is working in my project:

<button type="reset" onclick="$('.text-danger').hide();">Reset</ button>

<button type="submit" onclick="$('.text-danger').show();">Submit</button>

also you can change the selector as in your project, in my case im adding (text-danger) class to my validators as:

@Html.ValidationMessageFor(model => model.fieldName, "", new { @class = "text-danger" })

---

Also there is a better solution i found by John Culviner and it working perfectly

1- after including the jquery (page end) write this script:

<script>
    //clear validation on reset button clicked
    (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;
        };
    })(jQuery);
</script> 

2- Add on click event to call the Jquery function

<button type="reset" onclick="$(this).resetValidation()" >Reset</button>

See here for article by John