Accueil > > > JSCHECKER, VALIDEUR DE FORMULAIRE
 JSCHECKER, VALIDEUR DE FORMULAIRE
 Information sur la source
 Description
Bonjour à vous :) Ma toute première source sur JavascriptFr ! Faut un début à tout :p Alors voila, un petit script js qui permet de vérifier les entrées d'un formulaire afin de le valider (ou non). La validation se fait à chaque onBlur sur un élément qui à une règle d'associée. Les règles s'ajoutent soit avec la fonction addRule, soit avec du Json dans l'attribut alt de l'élément ciblé. Lors du submit, une variable contenant la liste des éléments ayant une règle est analysée afin de vérifier si l'élément en question à été validé, si oui, on valide le formulaire, sinon, on empêche sa validation. Ce code à été testé sous Firefox 2, Firefox 3 (beta 3) et Ie 7. Si vous avez un différent navigateur, je veux bien vos retours sur la compatibilité :) Merci ! :)
 Source
- <script type="text/javascript">
- var jsChecker = new JsChecker ('idDuFormulaire', {onError: 'displayError', onValid: 'deleteDisplay'});
-
- // le premier parametre peut-etre soit l'id du formulaire, soit le dom element directement (par document.form[x] ou par document.getElementById ('..') ou par document.forms['formName']
-
- // Le deuxieme argument est un objet contenant :
- // onError : une fonction à appeler lorsqu'un élément n'est pas validé
- // onValid : une fonction a appeler lorsqu'un élément est validé
- // parse : si on doit parser le formulaire pour y ajouter de nouvelles regles
- // Pas encore implémenté (pour la prochaine version), les regles sont à mettre dans l'attribut alt de l'élément input
- // focusOnError : si on remet le curseur dans la zone non validée (ne fonctionne pas)
-
-
- // Ensuite il ne reste qu'a faire des ajout de regles
- jsChecker.addRule ('elementName', {rule: 'isRequired', message: 'Element requis'});
- jsChecker.addRule ('elementName', {rule: 'maxLength', value: 5, message: 'Maximum de 5 caractères'});
-
- // le premier parametre de la méthode addRule est le nom de l'élément (la valeur de name="ici")
- // Le deuxieme parametre est un objet contenant un minimum de 2 valeurs, rule, le nom de la regle, et message, le message d'erreur quand la regle n'est pas validée. La troisieme valeur, optionnelle, est value, qui sera transmis à la regle indiquée par rule si besoin est (tel que maxLength, et d'autres (la liste sera faite par la suite)).
-
- // Vous pouvez ajouter des regles directement sur les éléments du formulaire. Pour ce faire, vous n'avez qu'à indiquer la balise alt= avec les regles en json :
- <input type="text" name="isRequired" alt="[{rule: 'isRequired', message: 'isRequired doit etre indiqué !'}]" />
-
- // Vous n'aurez ensuite plus qu'à faire vos fonctions handler pour onError et onValid (afficher un joli message en bas de la page, en haut, en alert (defaut, mais c'est pas beau :p), etc).
-
- // Et c'est tout ! :)
- </script>
-
- Liste des fonctions disponibles :
-
- * isEqual
- * isNotEqual
- * maxLength
- * minLength
- * rangeLength (demande en value un objet avec min et max : {min: x, max: y})
- * regExp
-
- isRequired
- isEmpty
- isAlphabetic
- isNumeric
- isAlphaNumeric
- isHexadecimal
- isPostal
- isUrl
- isEmail
- isPhone
- isIpv4
- isDate (format xx/xx/xxxx)
- isTime (format 23:59:59 (a|p)m)
-
- Les éléments avec une * sont ceux qui demande le parametre optionnel value
<script type="text/javascript">
var jsChecker = new JsChecker ('idDuFormulaire', {onError: 'displayError', onValid: 'deleteDisplay'});
// le premier parametre peut-etre soit l'id du formulaire, soit le dom element directement (par document.form[x] ou par document.getElementById ('..') ou par document.forms['formName']
// Le deuxieme argument est un objet contenant :
// onError : une fonction à appeler lorsqu'un élément n'est pas validé
// onValid : une fonction a appeler lorsqu'un élément est validé
// parse : si on doit parser le formulaire pour y ajouter de nouvelles regles
// Pas encore implémenté (pour la prochaine version), les regles sont à mettre dans l'attribut alt de l'élément input
// focusOnError : si on remet le curseur dans la zone non validée (ne fonctionne pas)
// Ensuite il ne reste qu'a faire des ajout de regles
jsChecker.addRule ('elementName', {rule: 'isRequired', message: 'Element requis'});
jsChecker.addRule ('elementName', {rule: 'maxLength', value: 5, message: 'Maximum de 5 caractères'});
// le premier parametre de la méthode addRule est le nom de l'élément (la valeur de name="ici")
// Le deuxieme parametre est un objet contenant un minimum de 2 valeurs, rule, le nom de la regle, et message, le message d'erreur quand la regle n'est pas validée. La troisieme valeur, optionnelle, est value, qui sera transmis à la regle indiquée par rule si besoin est (tel que maxLength, et d'autres (la liste sera faite par la suite)).
// Vous pouvez ajouter des regles directement sur les éléments du formulaire. Pour ce faire, vous n'avez qu'à indiquer la balise alt= avec les regles en json :
<input type="text" name="isRequired" alt="[{rule: 'isRequired', message: 'isRequired doit etre indiqué !'}]" />
// Vous n'aurez ensuite plus qu'à faire vos fonctions handler pour onError et onValid (afficher un joli message en bas de la page, en haut, en alert (defaut, mais c'est pas beau :p), etc).
// Et c'est tout ! :)
</script>
Liste des fonctions disponibles :
* isEqual
* isNotEqual
* maxLength
* minLength
* rangeLength (demande en value un objet avec min et max : {min: x, max: y})
* regExp
isRequired
isEmpty
isAlphabetic
isNumeric
isAlphaNumeric
isHexadecimal
isPostal
isUrl
isEmail
isPhone
isIpv4
isDate (format xx/xx/xxxx)
isTime (format 23:59:59 (a|p)m)
Les éléments avec une * sont ceux qui demande le parametre optionnel value
 Conclusion
Attention : N'oubliez pas que même avec un système de vérification de formulaire en javascript, les données doivent quand même être analysée dans votre fichier qui reçoit les données du formulaire (php/asp). La raison est toute simple, un navigateur avec le js de désactivé passera sans soucis la vérification js :p
J'attends vos commentaires remarques critiques jugements conseils (etc) avec impatience !
Ce qu'il reste à faire
_ De nouveau systèmes de vérification (vérification de l'extension, si l'élément est coché, ipv6)
_ Pouvoir faire des tests sur des éléments type CheckBox, Select, Radio
_ Faire des tests sur des spécificités (dateX > dateY, etc)
_ Correction de bugs ! :p
Vous trouverez un exemple à cette adresse :
http://projets.reflectiv.net/JsChecker/
Un grand Merci à Bultez pour son aide toujours claire et précise :)
 Historique
- 25 février 2008 03:12:14 :
- Erreurs dans le fichier zip :p
- 25 février 2008 03:14:25 :
- Erreurs dans le Zip :p
- 05 mars 2008 05:42:06 :
- Mise à jour importante, au programme :
_ Faire en sorte que les emails de type zerze@zerze@zer.zer ne soient pas validée (seulement 1 @)
_ Faire en sorte que seul des ip valides (>255) soient autorisées
_ Code Postal avec plus de 5 nombres ne soient pas acceptés (erreur confirmée :p)
_ Commenter les expressions régulières au maximum
_ Eviter les expressions régulières là ou il n'y en a pas besoin (ok, enfin je pense ! :p)
_ Faire en sorte que l'application soit valide firefox 2, firefox 3 et Ie6 & 7
_ Permettre de valider une regle sans forcément rendre l'élément obligatoire
_ Optimiser (alleger) le code
_ Suppression des Alias pour les fonctions afin : d'alléger le code et éviter les embrouilles
- 05 mars 2008 05:47:00 :
- Ajout du support de la gestion des attributs alt pour l'ajout à la volée de règles
- 05 mars 2008 23:11:24 :
- Correction du bug ! :)
 Sources de la même categorie
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
verif form [ par rduvrac ]
je n'arrive pas à faire fonctionner 2 scripts ensemble :-/ la 1er vérifie le contenu des champs textes et la 2eme grise le bouton de valida
fonctions imbriquées et portée de l'instruction "return" [ par yodaazen ]
Bonjour à tous et toutes,Je suis un peu en délicatesse avec un script de controle de données d'un formulaire avant envoi. Je m'explique :J'ai un formu
valid form avec la touche entree [ par krol ]
Bonjour, J'ai ce code, pour un form : <form action="../outils/recherche.asp" method=post id=laforme name=laform> <tr> <td><img sr
Evenement Onsubmit [ par apz ]
salut,j'ai un formulaire dont lequel j'appel une fonction javascript verif par l'evenement OnSubmit, qui a pour tâche de verifier les champs de mon fo
pb controle saisie formulaire [ par hallucinogen ]
bonjour a tous!voila g un souci avec mon formulaire. Lorsque je clik sur le bouton envoyer j appelle ma fonction javascript pr controler les champs ob
problème validation formulaire avec prototype [ par bumbo ]
Bonjour, J'essai de faire un controle de validation de formulaire avec prototype, le problème c'est que même si je renvoi "false" le formulaire est v
FORM / SELECT [ par toradoshi ]
Bonjour, ça doit être idiot comme question mais je tourne en rond depuis un certain temps alors je me jette ! j'ai un form name="myform" et un elemen
tabulation / controle form [ par toradoshi ]
Bonjour J'ai des dont la "value" est chargé selon la langue sélectionnée puis d'autres ou l'utilisateur rentre ses informations. La tabulation perm
Envoyer les valeurs d'un form dans une pop-up, avant validation du form [ par Gesatzs ]
bonjour ! J'ai un formulaire qui va servir - au final- à envoyer un email personnalisé. Donc parmi les champs du form, j'ai - entre autre - un champs
Aide a la création d'une fonction [ par kyoku59 ]
Bonjour. Voila j'ai cette fonction : [code=js] function heures() { var tabHeure= new Array("01","02","03", "04", "05","06","07", "08"
|
Derniers Blogs
 COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE?COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE? par Matthieu MEZIL
Avec EF, les vues doivent être mappées sur des entity types. Le problème c'est que les entity types doivent avoir une clé. Avec EF, nous avons les complex type qui n'ont pas de clé mais les vues ne peuvent pas être mappées dessus. Avec EF4, il est possibl...
Cliquez pour lire la suite de l'article par Matthieu MEZIL [WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL?[WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL? par JeremyJeanson
Certain d'entre vous on peut être vécu cette situation embarrassante après quelques temps passer avec WF4 : Au début avec mon " ActivityDesigner" , tout allait bien. Et puis un jour j'ai au des problèmes de " Binding" . Alors nous sommes allé sur le site ...
Cliquez pour lire la suite de l'article par JeremyJeanson MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ?MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ? par junarnoalg
La prochaine session de MyTIC aura lieu à Namur, le 23 mars prochain. Pendant presque une heure, nous parlerons de SharePoint 2010. Voici un aperçu du programme.
Accueil : 17h30 Début de la session : 18h00 - Les nouvelles int...
Cliquez pour lire la suite de l'article par junarnoalg
Logiciels
 Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|