besoin de jquery.valider sans le soumettre

J'ai lu plusieurs posts à ce sujet et toujours pas aller. En essayant de rester dans la réalité simple. J'ai besoin de valider les sections d'un formulaire qui sont en cours de caché/montré dans un accordéon jQuery avant de l'envoyer. J'ai été en utilisant jquery.validate.js pour un long moment et aussi longtemps que je valide sur submit tout est bon, mais maintenant, quand j'essaie de valider sur le bouton click il n'est pas de travail.

    <script type="text/javascript">
jQuery().ready(function(){
var demo = $(".demo").accordion({
header: '.header',
event: false
});
var nextButtons = $([]);
$("h3.header", demo).each(function(index) {
nextButtons = nextButtons.add($(this)
.next()
.children(":button")
.filter(".next, .previous")
.click(function() {
demo.accordion("activate", index + ($(this).is(".next") ? 1 : -1))
}));
});
});
</script>
<script type="text/javascript">
$(".next").click(function(){
$("#test").validate({              
rules: {
name: "required", //simple rule, converted to {required:true}
email: {//compound rule
required: true,
email: true
},
comment: {
required: true
}
},
message: {
comment: "Please enter a comment."
}
});
});
</script>
<div class="demo">
<form action="#" method="post" id="test">
<fieldset>
<div id="accordion">
<h3 class="header"><a href="#">Section 1</a></h3>
<div class="sec1">
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your 
full name" class="required" />
<input type="button" class="next" value="NEXT" />
</div>
<h3 class="header"><a href="#">Section 2</a></h3>
<div class="sec2">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter 
your email address" class="required" />
<input type="button" class="next" value="NEXT" />
<input type="button" class="previous" value="Previous"/>
</div>
<h3 class="header"><a href="#">Section 3</a></h3>
<div class="sec3">
<label for="message">Message:</label>
<textarea id="message" placeholder="What's on your 
mind?" class="required"></textarea>
<input type="submit" value="Send message" />
<input type="button" class="previous" value="Previous"/>
</div>
</fieldset>
</form>
</div>
</div><!-- End demo -->

cette POST va vous aider.
Grâce Kundan pour votre réponse. je suis désolé, mais je ne vois pas en quoi cela m'aide. Je n'ai pas de onsubmit sur ma balise form et je ne suis pas vérifier '("#test").valider " pour renvoyer la valeur true pour que quelque chose arrive. je tiens à transmettre les valeurs de mes champs pour le programme de validation de fonctions pour le traitement/l'évaluation. il semble que la fonction de clic attaché au bouton avec la classe de "prochain" n'est tout simplement pas passe

OriginalL'auteur Brent Lawson | 2012-08-23

33

Le problème est que vous ne pouvez pas initialiser validate() à l'intérieur de un gestionnaire. Vous l'initialiser à l'intérieur de la document.ready et l'utilisation .valid() pour tester la validité. Un bouton d'envoi n'est pas requis pour valider le formulaire dans ce cas.

Comme par cette réponse:

.valider() est ce qui initialise la Validation plugin sur votre form.

.valide() retourne true ou false en fonction de si votre formulaire est actuellement valide.

Dans vos .click() gestionnaire, vous pouvez utiliser .valid(), pas .validate(), en conjonction avec un if déclaration de tester si le formulaire est valide...
```
$(document).ready(function() {
$("#test").validate({  //initialize plugin on the form
rules: {
...
}
...
//etc.
});
$(".next").click(function(){  //capture the click
if($("#test").valid()){   //test for validity
//do stuff if form is valid
} else {
//do stuff if form is not valid
}
});
});
```
Voir docs.jquery.com/Plugins/Validation/valid pour plus d'info.

Normalement, vous avez un type="submit" bouton à l'intérieur de la form conteneur et, dans ce cas, n'aurait pas besoin de capturer les clics que cela est fait automatiquement. Cette réponse est adaptée pour l'OP du cas spécifique où une traditionnelle submit bouton n'est pas utilisé.

Note: Tous vos JavaScript peut être contenue dans un unique ensemble de <script></script> balises. Plusieurs ensembles de balises tous enfilés ensemble est inutile et superflu.

grâce Sparky, trop en retard, je sais
grande explication.
Super réponse, m'a aidée à sortir de la confiture! Merci!!
Grande Réponse...!!!

OriginalL'auteur Sparky

Vous devez vous connecter pour publier un commentaire.