Jquery validation de plusieurs onglets, valider qu'un seul à la fois?
Je suis nouveau sur jQuery et je suis en train de l'utiliser et de la validation du plugin (http://docs.jquery.com/Plugins/Validation) pour créer une partie multi-forme avec plusieurs onglets pour les différentes sections. Maintenant, je l'ai, là où il y a plusieurs onglets et le bouton "Suivant" pour passer à la prochaine onglet.
Le problème, je vais avoir, c'est que lorsque j'ai enfin soumettre à la dernière page, le formulaire valide correctement, mais si il y a des erreurs sur l'autre page de l'utilisateur n'est pas informé, et la validation vraiment n'arrive qu'une fois "soumettre" est cliqué.
Comment puis-je valider chacun individuellement lorsque je clique sur "Suivant"? Je n'ai pas vraiment envie de créer des formes multiples ou garder une trace de champs cachés :S Toutes les suggestions?
Merci!
<script type="text/javascript">
$(document).ready(function() {
//....stuff
//tabs
var tabs = $("#tabs").tabs();
$(".nexttab").click(function() {
//var selected = $("#tabs").tabs("option", "selected");
//$("#tabs").tabs("option", "selected", selected + 1);
$("#tabs").tabs("select", this.hash);
});
//use link to submit form instead of button
$("a[id=submit]").click( function(){
$(this).parents("form").submit();
});
//form validation
var validator = $("#myForm").validate();
});
</script>
<form class="cmxform" id="myForm" method="post" action="">
<div id="tabs">
<ul>
<li><a href="#general">General</a></li>
<li><a href="#tab2"></a></li>
</ul>
<div id="general">
....stuff...
<p>
<a class="nexttab navbutton" href="#tab2"><span>Next</span></a>
</p>
</div>
<div id="tab2">
<h2>Tab2</h2>
<p>
<a class="nexttab navbutton" href="#general"><span>Prev</span></a>
<a class="submit navbutton" id="submit" href="#"><span>Submit</span></a>
</p>
</div>
</div>
</form>
Edit:
@André:
J'ai fait de la combinaison de votre 2ème exemple et la désactivation des onglets. Semble fonctionner, à part avoir l'actualisation de la page re-désactiver les onglets.
var tabs = $("#tabs").tabs({
disabled: [1,2,3,4,5],
select: function(event, ui) {
var valid = true;
var current = $(this).tabs("option", "selected");
var panelId = $("#tabs ul a").eq(current).attr("href");
if(ui.index > current)
{
$(panelId).find("input").each(function() {
//console.log(valid);
if (!validator.element(this) && valid) {
valid = false;
}
});
}
return valid;
}
});
En combinaison avec:
$(".nexttab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("enable", selected+1);
$("#tabs").tabs("option", "selected", selected + 1);
});
OriginalL'auteur Jordan | 2011-04-13
Vous devez vous connecter pour publier un commentaire.
Ceci est possible en utilisant la
.élément(sélecteur)
fonction devalidator
. Ce que vous allez faire est de parcourir chaque élément de l'onglet actif et l'appel de la fonction de l'entrée. Cela va déclencher la validation de chaque élément à son tour, montrant le message de validation.En outre, vous aurez probablement souhaitez exécuter le même code lorsqu'un utilisateur clique sur un onglet pour accéder à un nouvel ensemble d'entrées, au lieu de cliquer sur "suivant".
Voici un exemple de travail: http://jsfiddle.net/c2y6r/
Mise à jour: Voici une autre façon vous pourriez le faire, l'annulation de la
select
événement non valide les éléments de formulaire:Cependant, maintenant, vous devez envisager de permettre à l'utilisateur de revenir en arrière quand ils ont entré des données non valides dans la page en cours. D'autre part, vous obtenez le bonus de garder tout le code de validation à l'intérieur d'une fonction, ce qui est exclu si la personne clique sur un onglet ou votre lien suivant.
Exemple: http://jsfiddle.net/c2y6r/1/
Mise à jour 2, si vous souhaitez autoriser les gens à naviguer vers l'arrière par le biais de l'onglet de l'interface:
Vous pouvez toujours déterminer si l'indice de navigation est inférieur à l'actuel onglet index (pour la méthode 2, je vais mettre à jour l'exemple). Cependant, dans les deux cas, vous devez également réfléchir à propos de l'interaction qui se produit lorsqu'un utilisateur clique à partir d'un onglet à l'autre et saute au-dessus des onglets qui contiennent les champs requis. Ce qui se passe dans ce cas? Peut-être que vous ne devez autoriser les utilisateurs à aller de l'avant dans un onglet à un moment.
Ouais, j'aimerais éviter à l'utilisateur à partir d'abord de sauter à un autre onglet, mais je n'ai pas souvenir d'accéder aux onglets une fois qu'ils ont déjà atteint/déverrouillé le tab. Serait-exemple #2? L'autre chose à considérer est de savoir si les gens actualiser la page ou quelque chose. Merci 🙂
Presque. La deuxième mise à jour ne vous laisse aller en arrière. Vous pourrait assez facilement l'étendre à permettre aux gens d'aller à onglets
<=
de numéro le plus élevé de l'onglet en gardant la trace de la plus haute onglet index que l'utilisateur a accédé.merci pour la réponse. Il fonctionne uniquement pour les
input
balises. Pouvez-vous mettre à jour votre réponse à la de travail avecselection (dropdown)
etcheckbox
trop?OriginalL'auteur Andrew Whitaker
Le code existant ne fonctionne pas pour moi (c'est peut-être daté) alors je suis venu avec la suivante. Cet exemple suppose en utilisant les onglets jquery et jquery validateur.
êtes-vous à l'aide de ce plugin lien
OriginalL'auteur vdidxho