Form valiation avec h5Validate
Bonjour,
je travaille avec le plugin de Jquery h5Validation pour la validation des formulaires.
on utilisant ce bout de code
<script>
$(document).ready(function () {
$('form').h5Validate();
});
</script>
dans ma page web il y a plusieurs formulaires en popups, pour le premier form la validation marche très bien Nikel ;)
mon problème est pour tout autre formulaire , ça ne fonctionne pas au click sur le bouton de validation il m'affiche une alerte comme si tout le formulaire doit etre validé
j'ai tenté de travailler avec des ids pour chaque forms mais ça ne marche pas
je ne c pas que dois-je faire exactement ? any help ?
je travaille avec le plugin de Jquery h5Validation pour la validation des formulaires.
on utilisant ce bout de code
<script>
$(document).ready(function () {
$('form').h5Validate();
});
</script>
dans ma page web il y a plusieurs formulaires en popups, pour le premier form la validation marche très bien Nikel ;)
mon problème est pour tout autre formulaire , ça ne fonctionne pas au click sur le bouton de validation il m'affiche une alerte comme si tout le formulaire doit etre validé
j'ai tenté de travailler avec des ids pour chaque forms mais ça ne marche pas
je ne c pas que dois-je faire exactement ? any help ?
6 réponses
-
Bonjour,
Je pense qu'il faut mettre un id différent pour chaque formulaire et faire autant de $('#idform').h5Validate(); que d'id.
Cordialement -
Salut ,
j'ai essayé cette méthode et ça ne marche toujours pas
<script>
$(document).ready(function () {
$('#form1').h5Validate();
});
$(document).ready(function () {
$('#form2').h5Validate();
});
</script>
le truc qui me tracasse c'est que ça marche pour le form1 c'est à dire il lit l'id mais pas pour le form2 -
Ouii je viens de changer ça comme suite ;)
<script src="../assets/js/ajax_jquery_min.js"></script>
<script src="jquery.h5validate.js"></script>
<script>
$(document).ready(function () {
$('#form1').h5Validate();
$('#form2').h5Validate();
});
</script>
le formulaire 1 :
<form id="form1" name="form" method="POST" id="demande-cge-form" action="../includes/action_demande_conge.php">
<p>Date début</p><li><input type="date" class="date_conge" name ="date_debut" id="dated" required onfocus="this.value = '';" ></li>
<p>Date fin</p><li><input type="date" class="date_conge" name ="date_fin" id="datef" required onfocus="this.value = '';" ></li>
<li><input type="text" name ="nb_jours" class="motif" placeholder="Nombre de jours" title="Nombre de jours requis !" required onfocus="this.value = '';"></li>
<li><input type="textarea" name ="motif" class="motif" placeholder="Motif" title="Motif requis !" required onfocus="this.value = '';" ></li>
<button href="#" class="save btn-2" > Valider</button>
le 2eme formulaire :
<div class="login-form">
<form id="form2" name="loginform" method="POST" id="demande-cge-form" action="../includes/action_demande_autorisation.php">
<p>Date</p><li><input type="date" class="date_conge" name ="date" id="dated" required onfocus="this.value = '';" ></li>
<p>Heure début</p><li><input type="time" class="heure_conge" name ="heure_debut" required onfocus="this.value = '';" ></li>
<p>Heure fin</p><li><input type="time" class="heure_conge" name ="heure_fin" required onfocus="this.value = '';" ></li>
<li><input type="textarea" name ="motif" class="motif" placeholder="Motif" required onfocus="this.value = '';" > </li>
<button href="#" class="save btn-2" > Valider</button>
</form></div> -
j'y crois pas ce sont vraiment des fautes d'inattention !! désolée
mais sinon j'ai corrigé cela
$(document).ready(function () {
$('#demande-cge-form1').h5Validate();
$('#demande-cge-form2').h5Validate();
});
<form name="loginform" method="POST" id="demande-cge-form1" >
<form name="loginform" method="POST" id="demande-cge-form2" >
et ça marche tjrs pas -
voilà le code
<code html>
</code>
<script src="../assets/js/ajax_jquery_min.js"></script>
<script src="jquery.h5validate.js"></script>
<script>
$(document).ready(function () {
$('#demande-cge-form1').h5Validate();
$('#demande-cge-form2').h5Validate();
});
</script>
<div id="openModal" class="modalDialog">
<div ><a href="user.php" title="Close" class="close">X</a>
<div class="login-form">
<form name="loginform1" method="POST" id="demande-cge-form1" action="../includes/action_demande_conge.php">
<p>Date début</p><li><input type="date" class="date_conge" name ="date_debut" id="dated" required ></li>
<p>Date fin</p><li><input type="date" class="date_conge" name ="date_fin" id="datef" required ></li>
<li><input type="text" name ="nb_jours" class="motif" placeholder="Nombre de jours" title="Nombre de jours requis !" required ></li>
<li><input type="textarea" name ="motif" class="motif" placeholder="Motif" title="Motif requis !" required > </li>
<button href="#" class="save btn-2" > Valider</button>
</form>
</div>
</div>
</div>
<div id="openModal2" class="modalDialog2">
<div><a href="user.php" title="Close" class="close">X</a>
<div class="login-form">
<form name="loginform2" method="POST" id="demande-cge-form2" action="../includes/action_demande_autorisation.php">
<p>Date</p><li><input type="date" class="date_conge" name ="date" required ></li>
<p>Heure début</p><li><input type="time" class="heure_conge" name ="heure_debut" required ></li>
<p>Heure fin</p><li><input type="time" class="heure_conge" name ="heure_fin" required ></li>
<li><input type="textarea" name ="motif" class="motif" placeholder="Motif" required > </li>
<button href="#" class="save btn-2" > Valider</button>
</form>
</div>
</div>
</div> -
D'après la doc de h5validate placez les scripts après les formulaires ou en bas de page
<script src="../assets/js/ajax_jquery_min.js"></script> <script src="jquery.h5validate.js"></script> <script> $(document).ready(function () { $('#demande-cge-form1').h5Validate(); $('#demande-cge-form2').h5Validate(); }); </script>
