J'utilise le plug-in de validation jQuery pour la validation côté client . La fonction editUser()
est appelée en cliquant sur le bouton "Modifier l'utilisateur", qui affiche des messages d'erreur.
Mais je veux effacer les messages d'erreur sur mon formulaire, lorsque je clique sur le bouton "Effacer", cela appelle une fonction distincte clearUser()
.
function clearUser() {
// Need to clear previous errors here
}
function editUser(){
var validator = $("#editUserForm").validate({
rules: {
userName: "required"
},
errorElement: "span",
messages: {
userName: errorMessages.E2
}
});
if(validator.form()){
// Form submission code
}
}
Vous voulez la méthode resetForm()
:
var validator = $("#myform").validate(
...
...
);
$(".cancel").click(function() {
validator.resetForm();
});
Je l'ai saisi à la source de l'un de leurs démos .
Remarque: Ce code ne fonctionnera pas pour Bootstrap 3.
Je suis tombé sur ce problème moi-même. J'avais besoin de valider de manière conditionnelle des parties d'un formulaire pendant la construction du formulaire en fonction d'étapes (c'est-à-dire que certaines entrées étaient ajoutées dynamiquement pendant l'exécution). En conséquence, une liste déroulante sélectionnée nécessitait parfois une validation, et parfois non. Cependant, à la fin de l'épreuve, il devait être validé. En conséquence, j'avais besoin d'une méthode robuste qui ne soit pas une solution de contournement. J'ai consulté le code source pour jquery.validate
.
Voici ce que je suis venu avec:
Voici à quoi cela ressemble dans le code:
function clearValidation(formElement){
//Internal $.validator is exposed through $(form).validate()
var validator = $(formElement).validate();
//Iterate through named elements inside of the form, and mark them as error free
$('[name]',formElement).each(function(){
validator.successList.Push(this);//mark as error free
validator.showErrors();//remove error messages if present
});
validator.resetForm();//remove error class on name elements and clear history
validator.reset();//remove all error and success data
}
//used
var myForm = document.getElementById("myFormId");
clearValidation(myForm);
minified comme une extension jQuery:
$.fn.clearValidation = function(){var v = $(this).validate();$('[name]',this).each(function(){v.successList.Push(this);v.showErrors();});v.resetForm();v.reset();};
//used:
$("#formId").clearValidation();
Si vous voulez simplement cacher les erreurs:
$("#clearButton").click(function() {
$("label.error").hide();
$(".error").removeClass("error");
});
Si vous avez spécifié errorClass
, appelez cette classe pour masquer error
(la valeur par défaut) que j'ai utilisée ci-dessus.
Si vous n’aviez pas précédemment enregistré les validateurs en les attachant au formulaire, vous pouvez simplement simplement appeler
$("form").validate().resetForm();
as .validate()
renverra les mêmes validateurs que vous avez joints précédemment (si vous l'avez fait).
Si vous voulez le faire sans utiliser de variable distincte, alors
$("#myForm").data('validator').resetForm();
Malheureusement, validator.resetForm()
ne fonctionne PAS, dans de nombreux cas.
J'ai un cas où, si quelqu'un frappe le "Soumettre" sur un formulaire avec des valeurs vides, il devrait ignorer le "Soumettre". Aucune erreur. C'est assez facile. Si quelqu'un définit un ensemble partiel de valeurs et clique sur «Soumettre», il doit marquer certains champs avec des erreurs. Si, toutefois, ils effacent ces valeurs et cliquent à nouveau sur «Soumettre», cela devrait effacer les erreurs. Dans ce cas, pour une raison quelconque, il n'y a aucun élément dans le tableau "currentElements" du validateur. L'exécution de .resetForm()
ne fait donc absolument rien.
Il y a des bugs signalés à ce sujet.
Jusqu'à ce qu'ils résolvent les problèmes, vous devez utiliser la réponse de Nick Craver, PAS la réponse acceptée par les perroquets.
Vous pouvez utiliser:
$("#myform").data('validator').resetForm();
Si vous voulez simplement effacer les étiquettes de validation, vous pouvez utiliser le code de jquery.validate.js resetForm ()
var validator = $('#Form').validate();
validator.submitted = {};
validator.prepareForm();
validator.hideErrors();
validator.elements().removeClass(validatorObject.settings.errorClass);
Je pense que nous avons juste besoin d'entrer les entrées pour tout nettoyer
$("#your_div").click(function() {
$(".error").html('');
$(".error").removeClass("error");
});
Pour ceux qui utilisent Bootstrap 3, le code ci-dessous nettoie tout le formulaire: messages, icônes et couleurs ...
$('.form-group').each(function () { $(this).removeClass('has-success'); });
$('.form-group').each(function () { $(this).removeClass('has-error'); });
$('.form-group').each(function () { $(this).removeClass('has-feedback'); });
$('.help-block').each(function () { $(this).remove(); });
$('.form-control-feedback').each(function () { $(this).remove(); });
J'ai testé avec:
$("div.error").remove();
$(".error").removeClass("error");
Ce sera ok, quand vous aurez besoin de le valider à nouveau.
var validator = $("#myForm").validate();
validator.destroy();
Cela détruira toutes les erreurs de validation
Aucune des autres solutions n'a fonctionné pour moi. resetForm()
est clairement documenté pour réinitialiser le formulaire réel, par exemple. supprimer les données du formulaire, ce qui n'est pas ce que je veux. Il arrive parfois que ce ne soit pas le cas, mais simplement de supprimer les erreurs. Ce qui a finalement fonctionné pour moi est la suivante:
validator.hideThese(validator.errors());
Essayez de l'utiliser pour supprimer la validation en cliquant sur Annuler
function HideValidators() {
var lblMsg = document.getElementById('<%= lblRFDChild.ClientID %>');
lblMsg.innerHTML = "";
if (window.Page_Validators) {
for (var vI = 0; vI < Page_Validators.length; vI++) {
var vValidator = Page_Validators[vI];
vValidator.isvalid = true;
ValidatorUpdateDisplay(vValidator);
}
}
}
Pour supprimer le résumé de validation, vous pouvez écrire ceci
$('div#errorMessage').remove();
Cependant, une fois que vous avez supprimé, si la validation échoue, le résumé de la validation ne s'affiche pas car vous l'avez supprimé. Utilisez plutôt masquer et afficher en utilisant le code ci-dessous
$('div#errorMessage').css('display', 'none');
$('div#errorMessage').css('display', 'block');
Si vous souhaitez masquer une validation côté client qui ne fait pas partie d'un formulaire de soumission, vous pouvez utiliser le code suivant:
$(this).closest("div").find(".field-validation-error").empty();
$(this).removeClass("input-validation-error");
Aucune des solutions ci-dessus n'a fonctionné pour moi. J'ai été déçu de perdre mon temps avec eux. Cependant, il existe une solution facile.
La solution a été obtenue en comparant le balisage HTML pour l'état valide et le balisage HTML pour l'état d'erreur.
Aucune erreur ne produirait:
<div class="validation-summary-valid" data-valmsg-summary="true"></div>
lorsqu'une erreur survient, cette div est renseignée avec les erreurs et la classe est modifiée en validation-summary-errors:
<div class="validation-summary-errors" data-valmsg-summary="true">
La solution est très simple. Efface le code HTML de la div qui contient les erreurs, puis rétablit l'état valide de la classe.
$('.validation-summary-errors').html()
$('.validation-summary-errors').addClass('validation-summary-valid');
$('.validation-summary-valid').removeClass('validation-summary-errors');
Bonne codage.
J'ai essayé chaque réponse. La seule chose qui a fonctionné pour moi a été:
$("#editUserForm").get(0).reset();
En utilisant:
jquery-validate/1.16.0
jquery-validation-unobtrusive/3.2.6/
Dans mon cas, aidé avec l'approche:
$(".field-validation-error span").hide();
validator.resetForm()
méthode efface le texte d'erreur. Mais si vous souhaitez supprimer la bordure ROUGE des champs, vous devez supprimer la classe has-error
$('#[FORM_ID] .form-group').removeClass('has-error');
Je viens de faire
$('.input-validation-error').removeClass('input-validation-error');
pour supprimer la bordure rouge sur les champs d'erreur de saisie.
$(FORM_ID).validate().resetForm();
ne fonctionne toujours pas comme prévu.
Je nettoie le formulaire avec resetForm()
. Cela fonctionne dans tous les cas sauf un !!
Lorsque je charge un formulaire via Ajax et applique la validation de formulaire après le chargement de ma variable dynamique HTML
, puis après lorsque j'essaie de réinitialiser le formulaire avec resetForm()
, il échoue et supprime également toute la validation appliquée aux éléments de formulaire.
Donc, ne l'utilisez pas pour les formulaires chargés Ajax OR initialisés manuellement.
P.S. Vous devez utiliser Nick Craver answer pour un tel scénario, comme je l'ai expliqué.
Essayez d'utiliser:
onClick="$('.error').remove();"
sur le bouton Clear.
Si vous souhaitez également réinitialiser numberOfInvalids()
, ajoutez la ligne suivante dans la fonction resetForm
dans le numéro de ligne du fichier jquery.validate.js
: 415.
this.invalid = {};
Fonction utilisant les approches de Travis J , JLewkovich et Nick Craver ...
// NOTE: Clears residual validation errors from the library "jquery.validate.js".
// By Travis J and Questor
// [Ref.: https://stackoverflow.com/a/16025232/3223785 ]
function clearJqValidErrors(formElement) {
// NOTE: Internal "$.validator" is exposed through "$(form).validate()". By Travis J
var validator = $(formElement).validate();
// NOTE: Iterate through named elements inside of the form, and mark them as
// error free. By Travis J
$(":input", formElement).each(function () {
// NOTE: Get all form elements (input, textarea and select) using JQuery. By Questor
// [Refs.: https://stackoverflow.com/a/12862623/3223785 ,
// https://api.jquery.com/input-selector/ ]
validator.successList.Push(this); // mark as error free
validator.showErrors(); // remove error messages if present
});
validator.resetForm(); // remove error class on name elements and clear history
validator.reset(); // remove all error and success data
// NOTE: For those using bootstrap, there are cases where resetForm() does not
// clear all the instances of ".error" on the child elements of the form. This
// will leave residual CSS like red text color unless you call ".removeClass()".
// By JLewkovich and Nick Craver
// [Ref.: https://stackoverflow.com/a/2086348/3223785 ,
// https://stackoverflow.com/a/2086363/3223785 ]
$(formElement).find("label.error").hide();
$(formElement).find(".error").removeClass("error");
}
clearJqValidErrors($("#some_form_id"));