Aujourd'hui petit tutoriel sur un plugin de validation de formulaire. Fini la galère des formulaires validés tant bien que mal. Ici on fait ca très facilement et en un temps record.
Voici le résultat qu'on obtient a la fin :
Validation du formulaireEtape 1 : Tout d'abord, il faut télécharger les fichiers. Il vous faut la dernière version de JQuery, le plugin en question, les feuilles CSS relatives et un petit exemple pour vous aider si jamais vous êtes perdus :
Ficher d'exemple
Regardez dans l'archive (.zip), on retrouve ces élements.
Etape 2 : Ajoutez ces lignes entre vos balises HEAD
Le fichier jquery.validationEngine-fr.js est une extension pour les personnes utilisant un navigateur parametré en francais. Les autres auront le plugin normal, en anglais. Vous pouvez cependant le parametrer comme bon vous semble.<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-fr.js" type="text/javascript"></script>
Vous l'aurez compris, vous pouvez utiliser une classe ou un id, ici c'est le cas ou votre formulaire possède l'attribut id="formID"
$(document).ready(function() {$("#formID").validationEngine({success : false,failure : function() { callFailFunction() }})})
Vous devez mettre ce code entre des balises <script type="text/javascript"></script> ou alors dans un fichier *.js et inclus dans cette même balise avec l'attribut src="monfichier.js"
Dernière Etape, 5 :
I ne reste plus qu'a associer à chaque champ que l'on veut valider une classe spécifique. Par exemple, pour un champ obligatoire qui ne doit comporter que des lettres et qui ne doit pas dépasser 100 caractères :
<input class="validate[required,custom[onlyLetter],length[0,100]]" name="firstname" type="text" />Et voilà, maintenant, vous pouvez utiliser ces arguments pour la validation de vos champs :
optional: Special: Only validate when the field is not empty *Please call optional first
required: Field is required
length[0,100] : Between x and x characters allowed
maxCheckbox[7] : Set the maximum checkbox autorized for a group
minCheckbox[7] : Set the minimum checkbox autorized for a group
confirm[fieldID] : Match the other field (ie:confirm password)
telephone : Match telephone regEx rule.
email : Match email regEx rule.
onlyNumber : Numbers only
noSpecialCaracters : No special characters allowed
onlyLetter : Letters only
date : Invalid date, must be in YYYY-MM-DD format
Bonjour, le l'utilise et j'en suis content, par contre aurais-tu un exemple de validation date au format : dd/mm/yyyy.
RépondreSupprimerJ'ai un probleme avec ce plugin j'aimerai bien que si on sort d'un champ obligatoire sans l'avoir remplis il marque l'erreur mais je ne sais pas comment faire
RépondreSupprimerc'est le champ required qu'il faut parametrer
RépondreSupprimeravec mozilla, marche parfaitement mais avec IE6-8 les infobulle ne s'affichent pas correctement
RépondreSupprimeril doit y'avoir un autre CSS special IE
Si tu es vraiment passionné par tout ce qui touche aux nouvelles technologies, et t'y donne corps et âme pour faire de ta passion une vraie philosophie, essaie au moins de répondre aux questions qui te sont posées dans les commentaires...
RépondreSupprimerBonjour,
RépondreSupprimerMerci pour ce tuto, ça aide et ça marche de tonnerre.
J'ai regarder le code JS de fond en comble et n'y connaissant pas beaucoup en jquery(JS et Ajax) je n'arrive pas à décortiquer le code du fichier jquery.validationEngine.js pour y trouver ce que je cherche. C'est pas faute d'avoir chercher.
Ce que je cherche c'est à quel endroit dans le code on peut trouver l'information, la variable qui dit que tel champs est incorrect, ou mal remplit si vous préférer.
Imaginons que j'ai un champ du type :
Ma question est comment savoir si ce champ est bien remplit ou pas ?
Par exemple, il peux exister une variable de type booleen de cette sorte :
var nom = true -> ce qui voudra dire que le champ est correctement remplit et cette même variable nom vaudra false si c'est mal remplit.
j'espère avoir été clair dans mes propos, si ce n'est pas le cas veuillez m'en excuse.
Merci d'avance cordialement