Javascript

Manipulation de formulaires en Javascript

Fonction de validation twValide version 2.2 - Validation de formulaire côté client

Valider la saisie de vos formulaires avant même d’envoyer le formulaire. Cette fonction universelle très compatible permet de vous assurer que tous les champs obligatoires ont été remplis. De la saisie de texte à la liste de sélection, tous les types des éléments d’un formulaire sont traités. Téléchargez ce fichier "include" qui comprend aussi plusieurs autres validations spécifiques comme forcer la saisie de nombre ou de caractères spécifiques.

La première version de cette fonction était basée sur la déclaration des éléments obligatoires. Quelques années plus tard, je me suis rendu compte qu’un formulaire comportait plus d’éléments obligatoires qu’autre chose. En fait, il n’est pas rare de voir des formulaires où tous les éléments sont obligatoires. À chacun de mes contrats, je dois utiliser une telle fonction qui à répétition me demandait d’indiquer les champs obligatoires. J’ai donc pensé à me faire une fonction qui force la saisie obligatoire en partant. Une variable déclarée avant la fonction me permet d’indiquer les exceptions qui ne doivent pas être obligatoires. De cette façon, et avec les autres fonctions, la plupart de mes formulaires sont validés automatiquement sans aucune modification.

Compatibilité
J’ai testé la fonction sur plusieurs navigateurs et système d’exploitation dont Internet Explorer, Netscape, Opera, Mozilla sous Win98, 2000 et Macintosh. La liste détaillée est dans la fonction.

• Téléchargez twValide 2.2 (en version anglaise et française)
• Exemple de la validation

Exemple: C’est très simple, ajouter la fonction en haut de votre document et ajouter cette ligne de code dans la déclaration du formulaire.

<form method="post" action="[url]" Name="nomDuFormulairel"" onSubmit="return twValide(this);">

Configuration de la fonction
Ajouter le nom des éléments qui ne sont pas obligatoires (propriété "name") dans cette chaîne de caractère juste avant la fonction. Exemple:

var varValid = "telecopie,description,...";

Les valeurs "telecopie" et "description" étant:

<input type="text" name="telecopie" />
<textarea name="description"></textarea>

Pour que votre formulaire soit en français, il suffit de mettre dans la variable "nlang" "fr". Pour l’anglais, elle doit contenir autre chose que "fr"

var nlang = "fr"

Les autres fonctions

Fonction: twCompare_password(nPass1,nPass2)
Permet de comparer deux mots de passe, si les deux mots de passe ne sont pas identiques, une boîte d’alerte s’ouvrira et ensuite les deux saisies seront effacé et le focus remi sur le premier. Cette fonction doit être appelée directement dans la saisie du deuxième mot de passe.

<input type="password" name="pass1">
<input type="password" name="pass2" onChange="twCompare_password(this.form.pass1,this);">

Fonction: twValide_char(nChamp,nAccepte,nbr)
Permet de spécifier les caractères acceptés. Pour un nombre ou un numéro de téléphone par exemple. Si la chaîne de caractères saisie contient un caractère qui n’est pas spécifié dans le deuxième paramètre, une boîte d’alerte s’ouvre et indque les caractères acceptés. Le focus revient sur la saisie sélectionnée. Cette fonction doit être appelée directement dans la saisie du champ concerné. Le paramètre "nbr" oblige l’usager à entrer un minimum de caractère.

<input type="text" name="telecopie" onBlur="twValide_char(this,’()-0123456789’,8)">

Fonction: twValide_courriel(nChamp)
Permet de valider un courriel. Si le champ n’est pas une adresse de courriel valide, une boîte d’alerte s’ouvre et indque le format valide. Le focus revient sur la saisie sélectionnée. Cette fonction doit être appelée directement dans la saisie du champ concerné.

<input type="text" name="Courriel" onBlur="twValide_courriel(this);">

Fonction: twValide_date(nDate,nA1,nA2,nFormat)
Permet de valider une date entre deux années et selon 3 formats. Les paramètres A1 et A2 représentes l’interval de l’Année à respecter. nFormat, le format de date à saisir. Si la date n’est pas valide, une boîte d’alerte s’ouvre et indque le format valide selon celui indiqué par le paramètre nFormat. Le focus revient sur la saisie sélectionnée. Cette fonction doit être appelée directement dans la saisie du champ concerné.

Les formats valides sont:

• jj/mm/aaaa
• mm/jj/aaaa
• aaaa/mm/jj

<input type="text" name="Datel" onBlur="twValide_date(this,1950,2020,’jj/mm/aaaa’)">

Fonction: twCompteur_Texte(nTexte, nCompteur, nLimite)
Ce conteur de caractère permet de limiter le nombre de caractère saisie dans une boîte de type "textarea". Aucun message d’erreur n’est affiché mais la saisie ne permet pas plus de caractères. Cette fonction doit être appelée directement dans la saisie du champ "textarea" et VOUS DEVEZ ajouter une boîte de saisie en lecture seule "readonly" qui affichera les caractères restants. "this.form.compte" représente la boîte indiquant le nombre de caractères restants et 2000 représente la limite de caractères.

<textarea cols="30" rows="5" name="description" onKeyDown="twCompteur_Texte(this,this.form.compte,2000);" onKeyUp="twCompteur_Texte(this,this.form.compte,2000);"></textarea>
<input readonly="readonly" type="text" name="compte" size="4" maxlength="4" value="2000">

PROBLÈME avec Netscape 4- pour le compteur de caractères
Ce script fonctionne sous Netscape 4 et moins seulement s’il n’est pas dans une table !! Aussitôt que le "textarea" est dans une table il ne fonctionne plus... J’ai ajouté la capture d’événement "onblur" qui permet d’indiquer quand même le nombre de caratères à la sortie de la saisie tout en réduisant le nombre de caractères à la limite permise mais l’usager doit sortir du champ avant d’en être informé. Vous pouvez aussi, malgré que cela ne soit pas toujours possible, sortir la saisie de la table comme dans mon exemple. Noter aussi que lorsque l’usager atteint la limite, Netscape le positionne au début du champ "textarea" ce qui n’est pas très agréable. IL N’EST PAS DU TOUT COMPATIBLE SOUS LINUX !!

Conclusion
Avec ces 6 fonctions, vous avez la possibilité de faire une validation professionnelle sans trop d’effort. Noter qu’il existe des centaines d’exceptions, cette fonction permet dans un premier jet d’automatiser la validation efficacement mais, dans un projet qui contiendrait un formulaire complexe, il faut bien sûr ajouter quelques validations.