Reset Form / remove error classes from jQuery validate

Question

i have a contact form with jQuery validate method. When the user click on "Reset"-button the hole contact form should be go to the initial state.

This is the button looks like:

<form class="form" method="post" action="" name="contact" id="contact">
  <button type="button" id="cancel" class="btn btn-danger btn-lg">Reset</button>
</form>

And the JS-Code in my "$(document).ready-function" is:

$('#cancel').on('click', function () {
   $("#contact").validate().resetForm();
   $("#contact").removeClass("has-error");
});

Problem: The error Text and the Input-fields will be deleted. But the red border (.has-error) or the green border (.has-success) don't be deleted.

i've created an JSFiddle for you:

http://jsfiddle.net/bBc8c/1/

One Button is clear the input text, the other is delete the error Messages. I need a Button which reset both (Text, Error Message) and the main problem the red border from the has-* classes.

One Button is declared as type=submit the other is type=button:

<button type="button" id="cancel" class="btn btn-danger btn-lg">Reset 1</button> 
<button type="reset" id="cancel2" class="btn btn-danger btn-lg">Reset 2</button>

Answer 1

Your Updated Fiddle

JS Update

 $('#cancel').on('click', function () {
         $("#contact").validate().resetForm();
         $("#contact").find('.has-error').removeClass("has-error");
         $("#contact").find('.has-success').removeClass("has-success");
         $('#contact').find('.form-control-feedback').remove()
  });