How to clear validation on reset button, and make it continue to show if submit is pressed again

Question

Each input has:

@Html.LabelFor
@Html.EditorFor
@Html.ValidationMessageFor

The validation message has a class of 'text-danger'. On submitting incorrect values, the errors appear properly. I added a Clear button with type="reset" but this only resets the input fields, not the validation messages.

I am aware of a similar question: How to clear Jquery validation error messages?

But, I need a clear explanation of whether to change the existing jquery.validation scripts, or how to write a separate script. Also, given the above criteria, how to format the onclick event of the reset button.

Answer 1

I was getting a console error with Travis J's solution: 'cannot read property of 'resetForm' undefined...'

I used Nick Craver's answer to hide the error classes on Clear, and show them again on Submit.

<script type="text/javascript">
    $(document).ready(function () {
        $('#clear').click(function () {
            $(".has-error").hide();
            $(".text-danger").hide();
        });
        $('#submit').click(function () {
            $(".has-error").show();
            $(".text-danger").show();
        });
    });           

All validation still works.