Ouvrez panneau accordéon sur des erreurs de validation
Je suis à l'aide de jQuery accordion de diviser mes formulaires en plusieurs panneaux et jQquery de validation pour vérifier les champs requis. Il fonctionne très bien pour afficher des erreurs dans les champs validés tant qu'ils sont dans le panneau ouvert.
Un exemple. Disons que j'ai de l'arbre de l'accordéon et des panneaux sur la première j'ai deux champs de formulaire qui doit être validé. Maintenant, si le visiteur commutateur de panneau de deux ou trois, et de l'envoi du formulaire sans remplir les champs requis sur panneau de celui que je veux le premier panneau accordéon pour ouvrir et afficher les erreurs.
Quelqu'un connais un moyen de faire ce travail?
C'est le code que j'utilise aujourd'hui:
$(document).ready(function() {
$("#accordion").accordion({
autoHeight: false,
navigation: true,
});
$("#validate_form").validate({
rules: {
page_title: "required",
seo_url: "required",
AccordionField: {
required: true
}
},
ignore: [],
messages: {
page_title: "Please enter a page title",
seo_url: "Please enter a valid name"
}
});
});
OriginalL'auteur perqedelius | 2012-07-14
Vous devez vous connecter pour publier un commentaire.
Pour résoudre le problème spécifique dans votre question, vous n'avez qu'à fournir une invalidHandler fonction de callback qui appelle la activate() méthode de l'accordéon widget pour ouvrir le premier volet:
Cela dit, la manipulation du cas général (non valide les éléments sur n'importe quel volet) et passer à la appropriée volet serait sans doute mieux. Pour ce faire, nous avons à récupérer le premier élément non valide à partir de la
invalidHandler
de rappel. Nous pouvons comparer leserrorClass
utilisé par le moteur de validation (error
par défaut), mais on ne peut pas aveuglément match que parce que la classe est également appliqué pour le message d'erreur étiquettes. Restreindre les résultats à un :entrée sélecteur va nous aider ici.À partir de là, nous pouvons utiliser plus proche (le) pour correspondre à l'ancêtre de l'accordéon volet, et index() pour obtenir son indice par rapport aux autres volets, ce qui nous amène au code suivant:
Mise à jour: Nous avons également appeler
showErrors()
explicitement dans notreinvalidHandler
, puisque cette fonction est responsable de la décoration de la non valide les éléments avec laerror
classe à la première place, mais est normalement appelé par la suite. (Source: http://forum.jquery.com/topic/jquery-validate-invalidhandler-is-called-before-the-errors-are-shown-maybe-better-vice-versa.)yup, l'appel à
showErrors()
est censé résoudre ce problème. Avez-vous vu ma mise à jour?Doux, maintenant, c'est de travailler comme un charm! Merci beaucoup!
OriginalL'auteur Frédéric Hamidi
L'API a été légèrement modifié, voici un exemple de travail basé sur la réponse sélectionnée pour n'importe qui dans l'avenir. Remarque le
ignore
qui est nécessaire pour prévenir les champs masqués dans un accordéon d'être négligé par le validateur.$("#accordion").accordion("activate", index);
à$(".accordion").accordion("option", "active", index);
, avec un indice égal à 0 pour le premier élément de l'accordéon.OriginalL'auteur Tomanow
Pour ceux qui sont en utilisant MVC, le invalidHandler est créé pour vous.
Quand j'ai essayé la remplaçant (à partir de https://github.com/jzaefferer/jquery-validation/issues/765)
La forme serait toujours soumettre.
Ma solution est de sortir de la fonction et de l'appeler quand la soumission est cliqué.
J'ai aussi dû retirer les ignorer=[]
OriginalL'auteur Jeiron