Réinitialiser le formulaire / supprimer les classes d'erreur de jQuery valider

J'ai un formulaire de contact avec la méthode jQuery validate. Lorsque l'utilisateur clique sur "Réinitialiser" – le bouton du formulaire de contact du trou doit passer à l'état initial.

Voici le bouton:

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

Et le code JS dans mon "$ (document) .ready-function" est:

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

Problème: L'erreur Texte et les champs d'entrée seront supprimés. Mais la bordure rouge (.has-error) ou la bordure verte (.has-success) ne sont pas supprimées.

J'ai créé un JSFiddle pour vous:

Http://jsfiddle.net/bBc8c/1/

Un bouton efface le texte d'entrée, l'autre est supprimer les messages d'erreur. J'ai besoin d'un bouton qui réinitialise les deux (Texte, Message d'erreur) et le problème principal de la bordure rouge des classes has- *.

Un bouton est déclaré comme type = submit l'autre est 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> 

Pour bootstrapvalidator, cela pourrait être utile lorsque le formulaire s'affiche 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(); }); 

Votre violon mis à jour

Mise à jour JS

  $('#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() }); 

Je réinitialisais le formulaire en utilisant simplement une entrée [type = "reset"] (aucun jQuery n'est requis)

 <form class="form" method="post" action="" name="contact" id="contact"> <input type="reset" class="btn btn-danger btn-lg" /> </form> 

J'ai créé un JSFiddle pour vous:

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

Un bouton efface le texte d'entrée, l'autre est supprimer les messages d'erreur. J'ai besoin d'un bouton qui réinitialise les deux (Texte, Message d'erreur) et le problème principal de la bordure rouge des classes has- *.

Un bouton est déclaré comme type = submit l'autre est 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> 

Cordialement