Les formulaires et Javascript

Javascript est trs utile pour la vrification des champs d'un formulaire. Nous allons construite tout d'abord un formulaire et nous tenterons de vrifier sa validit.

1 Construction du formulaire avec du CSS.

La structure du formulaire repose sur la cration d'une table1. L'utilisation de la balise legend (vos coordonnes) n'apporte rien sinon un encadrement plus clair du formulaire. Je vous laisse dcouvrir le CSS et le html du formulaire.

2 Contrle des champs

Cette partie est la plus intressante. Elle permet d'aider l'internaute dans sa saisie en validant certains champs.
1 Consuler les fichier CSS pour apprendre comment ne plus utiliser les tableaux pour crer des formulaires

2.1 Les champs valider

Dans cet exemple, nous allons contrler : 1) Si les champs ne sont pas vides. 2) Le numro de carte doit comporter 8 chiffres. 3) L'Email doit comporter un @ et un . et doit tre suivi de 2 lettres. Le contrle est appel sur la variable "Formulaire" qui est le nom du formulaire rcupre par
function controle(Formulaire)2.

Nous utiliserons une premire mthode simple puis une mthode faisant appel aux expressions rgulire. Les expressions rgulires sont souvent employes.

2.2 Contrle non vide

Il suffit de voir si le champ a au moins une valeur ! (bien sr, on ne peut contrler la validiter des donnes). Autrement dit, nom=a sera valide au mme titre que Monsieur Dupont !
if (Formulaire.elements[i].value.length<2){ Erreur+="Renseigner le champ "+Formulaire.elements[i].name +".\n"; } Erreur+=

permet d'accumuler les erreurs dans une mme variable d'erreur.

//affichage de l'erreur if (Erreur==""){ return true; } else{ alert(Erreur); return false; }

2.3 Contrle de la carte

La valeur du champ doit une un nombre de 8 chiffres.
if (Formulaire.elements[i].name=="carte"){ if (isNaN(Formulaire.elements[i].value)|| Formulaire.elements[i].value.length!=8){ Erreur+="Contrle du Code de votre carte.\n"; } }

2.4 Contrle de l'email

La fonction email vrifie plusieurs possibilits de fautes de l'adresse adresse.

2 Nous devrons modifier cet appel en utilisant un vnement.

/*Contrle du point*/
if (!(adresse.length-adresse.lastIndexOf(".")==4 || adresse.length-adresse.lastIndexOf(".")==3)) adresse.lastIndexOf(".") renvoie la position du dernier point dans l'expression adresse. (denis.dupont@ibisc.fr).lastIndexOf(".")= 19

/*Contrle de l'arobase*/
Il doit y avoir au moins une lettre avant l'@ et entre l'@ et le dernier ".".
if (adresse.indexOf("@")<1 || adresse.indexOf("@")+1>=adresse.lastIndexOf("."))

3 Envoie du formulaire
L'envoie du formulaire se fait par onsubmit="return controle(this)3" est une fonction qui contrle this (this est le formulaire) et qui renvoie true ou false. Dans le premier cas l'action : =mailto:dupont@lami.univevry.fr est lance avec un certains nombre de paramtres :
Contrle(this) subject=inscriptionHTML body=Bonjour,<BR> Voici les informations pour mon insciption votre EU libre :<B>Introduction HTML</B>:&body=<BR><BR>" method="post" enctype="text/HTML"

<form action="mailto:dupont@lami.univ-evry.fr ? subject=inscriptionHTML&body=Bonjour,<BR> Voici les informations pour mon insciption votre EU libre :<B>Introduction HTML</B>:&body=<BR><BR>" method="post" enctype="text/HTML" onsubmit="return controle(this);">

3 Encore une fois, il serait bon d'viter de mlanger HTML et Javascript

4 Utilisation des expressions rgulires

Une autre faon de vrifier une expression est d'utiliser les expressions rgulires. Tout repose sur la cration du motif vrifier. Les expressions rgulire sont un monde en elles mmes. De nombres sites existent sur ce sujet, ils devraient vous aider construire votre propre expressions.

4.1 Verifier la carte

Nous utiliserions simplement que le numro de carte contient que des chiffres (\d) au nombre de 8 {8}.
//Code carte numcarte a 8 chiffres if (Formulaire.elements[i].name=="carte"){ var numcarte= new RegExp("\\d{8}"); var macarte = Formulaire.elements[i].value; if (!numcarte.test(macarte)) { Erreur+="Contrle du Code de votre carte.\n"; } }//carte

4.2 Pour la verification de l'adresse

La vrification de l'adresse mail est plus intressante. Il y a du texte au dbut (au 1[lettre,chiffre,-,_,.]) Il y a @ Il y a du texte (au 1[lettre,chiffre]) Il y a . Il y a du texte la fin (au 2 5 [lettre]) Majuscule et minuscule a la mme valeur.
for (var i=0;i<Formulaire.elements.length-2;i++) if (Formulaire.elements[i].name=="Email"){ //alert(Formulaire.elements[i].value); var email = /^[a-z0-9\-_\.]+@[a-z0-9]+\.[a-z]{2,5}$/i; var xemail=Formulaire.elements[i].value; if (!email.test(xemail)) { Erreur+="Contrle de l'adresse email" + " lectronique non valide.\n"; } }//Controle email ^ email commence avec [un lment parmi ceux l] [] = chane alternative c-a-d un lment entre crochets au choix. a-z = le (utilis entre crochets) c'est pour dire toutes les lettres de a -> z (pour les majuscules voir dernier point "i") 0-9 = un chiffre de 0 9 /-_ = un caractre de / _ (pas de !,?) \. = le \ est un caractre d'chappement \. dsigne le .

+ = 1 ou + fois un lment dans les crochets prcdents. @ = @ doit tre prsent [a-z0-9]+ = au moins 1 fois un de ces caractres ou chiffre (pas de ? _-) . = il faut ensuite un . [a-z] = un caratre entre a et Z {2,5} = ce qui y a devant {} repet entre 2 5 fois $ = ce qui y a avant $ est la fin de chane i = le type de l'expression : minuscules et majuscules

Comme moi, vous tes admiratif de la puissance de l'criture !

5 Vers du code mieux structur

Encore une fois, il faut mieux structurer son travail. Le fichier doit se rsumer la prsentation du form. Le form n'est pas un tableau4.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr-FR" xml:lang="fr-FR"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-885915" /> <title>formulaire</title> <link rel="stylesheet" type="text/css" href="form/formulaire.css" /> <script type="text/javascript" src="form/formulaire.js"></script> </head> <body> <h1>Validation automatique de formulaires</h1> <form id="demoForm" method="get" actionaction="mailto:dupont@lami.univevry.fr"> </form> </body> </html>

Dans le fichier .js on remarquera aussi addListener(window, 'load', addFormChecks); On vite aussi le mlange du code HTML et javascript. Tester le fichier en particulier age=0, age=121.

4 Un tableau ! oui pour aligner les chose ! du CSS avec padding et margin devrait suffir.