Odelia>Technologiesbeta

Valider facilement des formulaires web avec style

| | |

Andrew Tetlaw décrit dans le billet Really easy field validation de son blog DEXAGOGO, une librairie JavaScript permettant de valider facilement les champs d'un formulaire web.

L'idée principale est d'associer des classes CSS particulières aux contrôles d'entrée HTML, pour que la librairie puisse en valider le contenu.
Par exemple, si vous souhaitez que dans une zone d'édition du formulaire, l'utilisateur saisisse obligatoirement une adresse électronique valide, vous utiliserez les classes CSS prédéfinies required et validate-email, comme ceci :

<input class="required validate-email" id="test" name="test" title="Adresse électronique"/>

Au moment de la validation (par défaut au moment de la soumission du formulaire), si une donnée saisie se révèle invalide, la librairie fait apparaître un message d'erreur prédéfini ou bien celui que vous avez indiqué.
Ce message apparaît avec un effet de type "fade-in", si vous avez référencé la librairie effects.js de Scriptaculous dans l'en-tête de la page HTML.

Voici un exemple de formulaire web très simple utilisant cette librairie en version 1.5.4.1, avec l'option qui demande la validation d'un champ lorsque celui-ci perd le focus :

:
:
:

balises dans Langages et systèmes

AJAX cajo Camel DSL Grails Groovy Java JBI prefuse RSS ServiceMix SOA