Bonjour
j'utilise le plugin Validation Plugin , j'au un formulaire qui contient deux fieldset, en float, j'ai deux button un ( étape suivant sur le 1er fieldset , et button valider sur le deuxième ).
ce que je veux c'est le suivant ;
quand on clique sur NEXT je valide les éléments du premier fieldset si c'est validé, le formulaire bouge a gauche pour afficher le deuxième. et si on clique sur valider il valide puis , on envoie.
j'ai réalisé un petit code ça marche pour la premiére validation mais pour la deuxième il me return toujours true même si c'est pas le cas .
voici mon code
</section>
Merci d'avance
Modifié par bridge (12 Jun 2013 - 16:13)
j'utilise le plugin Validation Plugin , j'au un formulaire qui contient deux fieldset, en float, j'ai deux button un ( étape suivant sur le 1er fieldset , et button valider sur le deuxième ).
ce que je veux c'est le suivant ;
quand on clique sur NEXT je valide les éléments du premier fieldset si c'est validé, le formulaire bouge a gauche pour afficher le deuxième. et si on clique sur valider il valide puis , on envoie.
j'ai réalisé un petit code ça marche pour la premiére validation mais pour la deuxième il me return toujours true même si c'est pas le cas .
voici mon code
<h2 class="h2">Demandez un crédit voiture en 2 minutes </h2>
<section class="section1 simulateur form_vous">
<form action="/" method="post" class="form_information" >
<fieldset class="fieldset_1 group_radio">
<legend >Vous</legend>
<div class="form-grou">
<div class="form_rows group_radio">
<label for="mde">
<input type="radio" name="radios" id="mde" value="1">
<span>Madame</span>
</label>
<label for="melle">
<input type="radio" name="radios" id="melle" value="2">
<span>Mademoiselle</span>
</label>
<label for="mr">
<input type="radio" name="radios" id="mr" value="3">
<span>Monsieur</span>
</label>
</div>
<div class="clear"></div>
</div>
<div class="form_rows">
<div class="form-group">
<label for="vous"><span class="req">*</span>Vous êtes</label>
<div class="controls">
<select name="vous" id="vous">
<option>Sélectionnez</option>
</select>
</div>
</div>
<div class="form-group">
<label for="nom"><span class="req">*</span>Nom</label>
<div class="controls">
<input class="" type="text" id="nom" name="nom">
</div>
</div>
<div class="form-group last">
<label for="prenomx"><span class="req">*</span>Prénom</label>
<div class="controls">
<input type="text" id="prenom">
</div>
</div>
</div>
<div class="form_rows">
<div class="form-group">
<label for="date"> <span class="req">*</span>Date de naissance</label>
<div class="controls group-select">
<select name="day" id="date" class="day first">
<option value="1">1 </option>
</select>
<select name="mois" class="mois">
<option value="1">1 </option>
</select>
<select name="ans" class="ans last">
<option value="1">1995 </option>
</select>
</div>
</div>
<div class="form-group">
<label for="email"><span class="req">*</span>Adresse e-mail</label>
<div class="email">
<input name="email" type="text" id="email" >
</div>
</div>
<div class="form-group last">
<label for="gsm"><span class="req">*</span>Téléphone</label>
<div class="controls">
<input name="gsm" type="text" id="gsm">
</div>
</div>
</div>
<div class="form_rows">
<div class="form-group">
<label for="cin"> <span class="req">*</span>N° de la CIN </label>
<div class="controls">
<input name="cin" type="text" id="cin">
</div>
</div>
<div class="form-group">
<label for="adresse"><span class="req">*</span>Adresse</label>
<div class="controls">
<input type="text" id="adresse" name="adresse">
</div>
</div>
<div class="form-group last">
<label for="ville"> <span class="req">*</span>Ville</label>
<div class="controls">
<input name="ville" type="text" id="ville">
</div>
</div>
</div>
<input type="submit" value=" etape suivante " id="form_next" class="next"/>
</fieldset>
<!--next filedset -->
<fieldset class="fieldset_1 group_radio">
<legend >Vous</legend>
<div class="form_rows">
<div class="form-group">
<label for="job"><span class="req">*</span>Profession</label>
<div class="controls">
<select name="job" id="job">
<option>Sélectionnez</option>
</select>
</div>
</div>
<div class="form-group">
<label for="contrat"><span class="req">*</span>Type de contrat </label>
<div class="controls">
<input type="text" id="contrat" name="contrat">
</div>
</div>
<div class="form-group last">
<label for="embauche"><span class="req">*</span>Date d'embauche</label>
<div class="controls group-select">
<select name="mois" class="mois">
<option value="1">Janvier </option>
</select>
<select name="ans" class="ans last">
<option value="1">1995 </option>
</select>
</div>
</div>
</div>
<div class="form_rows">
<div class="form-group">
<label for="company"> <span class="req">*</span>Nom de l'entreprise</label>
<div class="controls">
<input type="text" id="company" name="company">
</div>
</div>
<div class="form-group">
<label for="banque"><span class="req">*</span>Votre banque </label>
<div class="controls">
<select name="banque" id="banque">
<option>Sélectionnez</option>
</select>
</div>
</div>
<div class="form-group last">
<label for="open_compte"><span class="req">*</span>Date d'ouverture du compte</label>
<div class="controls group-select">
<select name="open_compte" class="open_compte">
<option value="1">Janvier </option>
</select>
<select name="ans" class="ans last">
<option value="1">1995 </option>
</select>
</div>
</div>
</div>
<div class="clear"></div>
<div class="form_rows">
<div class="form-group">
<label for="revenus_m"> <span class="req">*</span>Revenus mensuels nets </label>
<div class="controls">
<input name="revenus_m" type="text" id="revenus_m">
</div>
</div>
<div class="form-group">
<label for="credit_loyer"><span class="req">*</span>Crédit immobilier ou loyer</label>
<div class="controls">
<input type="text" class="" id="credit_loyer" name="credit_loyer">
</div>
</div>
<div class="form-group last">
<label for="autre"> <span class="req">*</span>Autres charges</label>
<div class="controls">
<input name="autre" type="text" id="autre" />
</div>
</div>
</div>
<input type=" " value=" " class="prev"/>
<input type="submit" vavalue="back" id="form_back" class="back"/>
<input type="submit" value="envoyer" id="form_next2" class="next"/>
</fieldset>
</form>
</section>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
/*////////////////////////////*/
var v=$(".form_information").validate({
rules: {
// simple rule, converted to {required:true}
nom: "required"
} ,
submitHandler: function(){
},
})
/**/
$('#form_next').click(function() {
if(v.form()){
$('.form_information').animate({
'margin-left':'-800px'
})
}
});
var v2=$(".form_information").validate({
rules: {
// simple rule, converted to {required:true}
company: "required",
autre: "required"
} ,
submitHandler: function(){
},
})
/**/
$('#form_next2').click(function() {
if(v2.form()){
alert('envoyé')
}
});
});
</script>Merci d'avance
Modifié par bridge (12 Jun 2013 - 16:13)