|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
 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 :)
 Fichier Zip
Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !
 Télécharger le zip
 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
Sources en rapport avec celle ci
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
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
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
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
Récup valeur form dans iframe [ par fdthierry ]
Bonjour,J'ai un form principale (frmSaisie) dans ma page principale.Dans cette page, j'ai une iframe avec un form (frmCalculPuls).Je souhaite récupére
|
 Téléchargements
Logiciels à télécharger sur le même thème :
|