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
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
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
 SLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPSSLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPS par Vko
Retrouvez les slides et les démo de ma session Fast & Furious XAML Apps. A ceux qui se posent la question : "est-ce que le code de la DataGrid est disponible?", je vous répondrais "pas encore". Je vais mettre en place un projet codeplex pour part...
Cliquez pour lire la suite de l'article par Vko XNA IS DEAD!XNA IS DEAD! par richardc
Depuis la semaine dernière (et grâce aux TechDays 2012), je me penche activement sur la nouvelle version de Windows, aka Windows 8. Vous me direz, il était temps puisque la première preview date de Septembre dernier.
OK. Remarquez, on n'en est qu'aux...
Cliquez pour lire la suite de l'article par richardc TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 !TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice
Speakers: Fabrice Meillon et Stanislas Quastana Cette session est basée entièrement sur celle donnée lors de la BUILD cet hiver. Il n'y a pas d'ajout d'information en rapport avec cet évènement passé. Windows 8 Server sera intégralem...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE)[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio
Je m'y prends un peu tard je sais, mais bon je suis développeur web et donc hyper fainéant ! Toujours dans le cadre des technologies émergentes, ici HTML5, parce qu'on aime HTML5 chez Wyg , nous seront présent, le vieux ( Aurélien V.) et moi, pour pr...
Cliquez pour lire la suite de l'article par Gio
Logiciels
 DocTranslate (V3.1.0.0)DOCTRANSLATE (V3.1.0.0)DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom... Cliquez pour télécharger DocTranslate Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System
|