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>

Solution 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()
  });

Solution 2

For bootstrapvalidator, this might useful when the form being display via bootstrap modal,

$("#editModal").on('hidden.bs.modal', function () {

        //Removing the error elements from the from-group
        $('.form-group').removeClass('has-error has-feedback');
        $('.form-group').find('small.help-block').hide();
        $('.form-group').find('i.form-control-feedback').hide();

    });

Solution 3

@J Santosh answer worked for Bootstrap 3, great work. For Bootstrap 4 I have done following changes:

 $('#cancel').on('click', function () {
    $("#contact").validate().resetForm();
    $("#contact").find('.is-invalid').removeClass("is-invalid");
    $("#contact").find('.is-valid').removeClass("is-valid");
    $("#contact").find('.invalid-feedback').remove();
    $("#contact").find('.valid-feedback').remove();
});

Simply have to change the class names. Hope it helps!

Comments

[mcatis]

yes, that's right. But this will only clear the text of the input fields. Not the error text and the error-class CSS-stylings.

[iff_haRdy]

@user3265764 okay, I looked into your fiddle. I'm not sure what are you actually trying to achieve with the has-error and has-success classes... a blank phone number is showing has-success. and you don't even need two cancel buttons, just add the onclick jQuery event for the type="reset" button. there are easier ways of doing the whole thing with just some default classes and some css. may be I can help you when I have some free time.

[mcatis]

hi! empty phone number is correct, because there are no rules / no requierements for this field. Why two buttons? Because of demonstrate what happened withe the different button types (submit, reset)!