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
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
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
Valider Formulaire [ par chris81 ]
bonjour,j'aimerai savoir si un bouton permet de valider deux form de nom different en meme tempset j'aimerai savoir si dans une feuille j'ecris<for
Recuperation d'un POST d'un popup vers une frame de la fenetre ki a ouvert le popup [ par Petiout2 ]
bonjour,j'aimerai recuperer un post d'un popup, et renvoyé ces informations vers la fenetre mere ki a appelé le popupj'ai essayé ca :<SCRIPT langua
Form et javascript [ par rems02 ]
Bonjour,Sur une page php j'ai un Form qui envoi une valeurselon le bouton appuyé (sur 4 disponibles au format image)ver une autre page php.Mais j'ai r
envoyer le résultat d'un form dans une popup [ par eax ]
salut à tous!j'ai un formulaire qui envoie son résultat dans une fenetre "_blank" et j'aimerais que cette fenetre n'ait pas de barre d'adrese, pas de
|
Derniers Blogs
 IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVESSHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg
Dernièrement, nous avons migré le site
myTIC
vers un nouveau serveur SharePoint 2010. Dans les contenus que nous vouloins récupérer, nous avions un certain nombre de blogs.
Nous avons utilisé les commandes Power...
Cliquez pour lire la suite de l'article par junarnoalg
Forum
 UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|