Jschecker, valideur de formulaire

Télécharger le projet
Commenter

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 / Exemple : 


<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 :)
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (codefalse)