Présentation
xValidator est une librairie javascript capable de gérer vos formulaires de façon très simple et entièrement automatisée. Elle ajoute de nouveaux types d'input, de nouveaux attributs et supporte les champs HTML5 même sous les vieux navigateurs. De plus, xValidator supporte trois langages : Français, Anglais et Allemand (qui se chargent automatiquement selon la langue du navigateur).
Un petit exemple pour vous faire une idée (présent dans le zip) : exemple xValidator
Installation
Dézzipez le fichier. Vous aurez alors un exemple (index.php) et la librairie xValidator (xvalidator/).
Vous pouvez uniquement copier le dossier xvalidator/ si vous souhaitez inclure cette librairie dans une autre page.
Dans ce cas, insérez dans votre page de formulaire les lignes suivantes :
- <script type="text/javascript" src="xvalidator/js/jquery-1.7.1.min.js"> </script>
- <script type="text/javascript" src="xvalidator/xvalidator.js"> </script>
Ensuite, pour initialisez xValidator, il suffit du code suivant :
- $(function() {
- initXvalidator('xvalidator/');
- });
Bien entendu, si vous changez xValidator de répertoire, il faudra changer le code : 'xvalidator/'.
Voilà c'est tout.
Les types de champs
xValidator utilise les nouveaux types de champs HTML5 mais leur ajoute le préfixe x.
Par exemple, pour afficher un champs de type number il suffit d'écrire :
- <input type="xnumber" xmin="0" xmax="10">
Information : Les champs n'ont pas besoin d'être dans un formulaire (balise : <form></form>) la validation sera quand même effective, mais il est tout de même préférable de les laisser dans un formulaire pour que la validation soit complete.
xnumber
Champs de type nombre servant à rentrer un... nombre.
Attributs possibles :
- xmin : valeur minimale de ce nombre
- xmax : valeur maximale
- xstep : valeur d'incrémentation (ex : 2, 4, 6, 8,...)
xurl
Champs de type url.
xemail
Champs de type email.
xtel ou xphonenumber
Champs de type numéro de téléphone.
xcapcha
Champs de type capcha. Cette capcha est très basique mais assure tout de même un certaine sécurité contre les bots, demandant de rentrer une addition.
xcolor
Champs de type couleur (hexadécimale), que l'utilisateur rentre à l'aide d'une palette.
xtime
Champs de type heure.
Attributs possibles :
- xmin : valeur minimale de l'heure (ex: 10:30)
- xmax : valeur maximale
Les valeurs de xmin et xmax s'écrivent sous la forme suivante : hh:mm (respectivement heures et minutes).
xdate
Champs de type date.
Attributs possibles :
- xmin : valeur minimale de la date (ex: 1333877382)
- xmax : valeur maximale
Les valeurs de xmin et xmax prennent une valeur de timestamp.
xdatetime
Champs de type date et heure.
Les attributs sont les mêmes que pour le champs de type xdate.
Autre attributs possibles
Les attributs suivant viennent compléter certains types de champs.
xpattern
Définit un pattern (une regex) à suivre pour le champs. Par exemple, si l'on veut un champs avec uniquement des voyelles :
<input type="text" xpattern="[aeiouy]+">
xrequired
Indique que le champs est obligatoire : <input type="text" xrequired="xrequired">
xplaceholder
Définit une valeur à afficher avant que l'utilisateur sélectionne le champs.
xminlength et xmaxlength
Définit une valeur minimale et maximale pour la taille du texte rentré.
Un peu de CSS
xValidator propose déjà un style css prédéfinit (xvalidator/css/xvalidator.css) mais vous pouvez le changer n'importe quand sans que cela ne pose problème.
Les différents sélecteurs :
- input[xrequired] : quand un champs à besoin d'être rempli.
- input[valid] : quand un champs est valide
- input[invalid] : quand un champs est invalide
- input[isplaceholder] : quand un champs affiche sa valeur "par défaut"
