SELFHTML actuel
Articles spécialisés
JavaScript
Dieter Raber:
Évaluation de formulaires
Dieter Raber
Remarques sur le sujet
Exemple et explications
Liens contextuels
|
SELFHTML actuel
Articles spécialisés
JavaScript |
|
|
Dieter Raber: |
|
|
|
| |
|
| Adresse électronique: |  d.raber@gmx.net |
Il s'agit ici d'un article traduit de l'allemand par la rédaction de SELFHTML actuel. Veuillez poser vos questions relatives à cet article uniquement à son auteur, prenant compte que celui-ci ne maîtrise peut-être pas la langue française!
 |
En principe, il est possible d'évaluer les formulaires de trois manières différentes, à savoir côté client, côté serveur ou par une combinaison de ces deux possibilités. Pour l'évaluation côté client, c'est en règle générale à JavaScript que l'on fait appel, pour le côté serveur par exemple à PHP, ASP ou Perl.
Avantages
Inconvénients
RFC819 seront acceptées de la même façon.Avantages
Inconvénients
Avantage:
Inconvénient:
Si une validation n'est pas vraiment importante, il faut se poser la question si l'on ne veut pas y renoncer purement et simplement. Sinon l'idée est bonne de combiner les deux systèmes, à savoir que l'on fait d'abord appel à JavaScript pour un premier filtrage et s'il est désactivé, c'est à la solution serveur qu'il est fait appel. Une solution purement JavaScript pour des données importantes ne se justifie que dans un environnement Intranet où l'utilisateur est parfaitement identifiable.
Remarque préliminaire: Pour le développement de la fonction qui suit c'est la traduction de l' 
exemple
des FAQ du groupe de nouvelles 
de.comp.lang.javascript
qui a servi de base.
Celui qui fait fréquemment appel à des formulaires dans ses pages Web, désirera un script qui puisse être configuré, donc toujours être réutilisable sans que quoi que ce soit ne doive être modifié dans la fonction proprement dite. Dans l'exemple qui suit, un script de ce genre est présenté. L'exemple est écrit en Javascript mais peut également être traduit sans problème dans un langage côté serveur. La construction est modulaire, c'est à dire que les blocs distincts effectuent différentes vérifications indépendamment l'un de l'autre. À tout moment, il peut être complété par des blocs personnels.
Outre le test standard, le script exécute également certaines missions peu communes. Il peut s'agir de
La vérification à l'aide d'une expression régulière permet de fixer ses propres critères. Par exemple, il est possible de n'accepter dans un champ que des termes composés de certains caractères, comme par exemple des noms d'utilisateur. L'expression régulière qui convient est inscrite dans la partie correspondante de la configuration.
Les deux dernières parties sont un mélange de validation et de rectification. La vérification de prix travaille en sorte que les entrées telles que 10,--, 10,- ou bien 10 sont tout simplement transformées en 10,00. Pour des mentions douteuses telles que 10,0, 10,000, pour lesquelles il est possible que la virgule ait été mal placée, un message d'erreur est produit. Les noms sont automatiquement corrigés, ainsi marie laure venturi devient Marie Laure Venturi, marquis de sade devient Marquis de Sade et même d'Artagnan est rétabli dans ses droits. D'autres particularités dans les noms peuvent être inscrites dans un tableau, mais il y a une limite où cette partie de la fonction doit renoncer.
À tout moment, la fonction peut être complétée par des vérifications supplémentaires, par exemple un formatage de la date. J'avais également envisagé une correction pour des noms tels que MacDonald ou bien DiCaprio. Mail il s'est rapidement avéré que c'était très problématique, voire impossible, étant donné que même des noms tels que Machiavelli ou bien Dillinger seraient concernés. Pour les extensions, il faut avant tout veiller à ce que toutes les parties travaillent indépendamment l'une de l'autre.
La fonction attend trois paramètres:
sender), this convient en règle générale,myarray),
ainsi que des informations sur ce qui doit à chaque fois être vérifié et que le message d'erreur correspondant,err_hd) est facultatif.Si le paramètre err_hd n'est pas fixé, le titre standard s'intitule "Une erreur est intervenue sur le script de cette page:".
Exemple de configuration:
var msg_1 = 'Erreur:';
var var_1 = new Array()
var_1[0] = new Array('nom_1','check_1','message_erreur1',/regexp_1/);
var_1[1] = new Array('nom_2','check_2','message_erreur2','');
Explications:
|
Lors d'une vérification d'après r l'expression régulière doit figurer entre des barres obliques sans apostrophes (/[0-9A-Za-z]{3,16}/), dans tous les autres cas doivent être notés ici des apostrophes sans contenu ('').
Valleurs possibles pour check_n:
|
Pour une vérification d'après plusieurs critères, l'élément correspondant doit être notifié plusieurs fois. Pour une vérification de prix, il est automatiquement vérifié si la valeur est un nombre. Pour la correction de noms, aucun message d'erreur n'est nécessaire. Pour une vérification d'adresse électronique, de valeurs numériques et de prix, ainsi que pour l'emploi d'une expression régulière, les valeurs sont sorties dans le message d'erreur. Les différentes erreurs sont précédées d'un · et d'un espace et le message est affiché avec alert().
Le résultat pourrait donner: Message d'erreur
Si le fichier avec la fonction doit être utilisé pour plusieurs formulaire dans le même projet, un nombre correspondant de tableaux de configuration doivent être fixés avec des noms différents.
Il faut naturellement que le script lui-même soit incorporé dans la page HTML:
<script type="text/JavaScript" src="form_validation.js"></script>
Il peut être appelé avec deux ou trois paramètres:
<form name="nom_formulaire" id="nom_formulaire" onSubmit="return validate(this,var_1)"> <form name="nom_formulaire" id="nom_formulaire" onSubmit="return validate(this,var_1,msg_1)">
| |
La configuration peut figurer soit directement dans le script, soit être notée entre les repères script correspondants dans le fichier HTML.
var msg_1 = 'Erreur:';
var var_1 = new Array()
var_1[0] = new Array('adresse"','e','Vous n'avez pas mentionné d'adresse','');
var_1[1] = new Array('email','m','n'est pas une adresse électronique valide','');
var_1[2] = new Array('nombre','n','n'est pas un nombre','');
var_1[3] = new Array('nombre','e','Vous n'avez mentionné aucune quantité','');
var_1[4] = new Array('prix unitaire','p','n'est pas un prix valide','');
var_1[5] = new Array('utilisateur','r','Le nom d'utilisateur doit comporter 8 caractères',/\w{8}/);
var_1[6] = new Array('utilisateur','c','','');
|
Le script proprement-dit se présente comme suit:
function validate(sender,myarray,err_hd) {
var message_erreur = !err_hd?new Array('Les erreurs suivantes sont survenues:\n'):new Array(err_hd+'\n');
var error = false;
for (i=0;i<myarray.length;i++) {
field = document.forms[sender.name].elements[myarray[i][0]];
/* Bloc 1 vérifie les champs qui doivent être renseignés */
if (myarray[i][1].indexOf('e')>-1) {
if (!field.value) {
error = true;
message_erreur.push(myarray[i][2]);
}
}
/* Bloc 2 vérifie si l'adresse électronique est correcte dans la forme */
else if (myarray[i][1].indexOf('m')>-1) {
if (field.value) {
var usr = "([a-zA-Z0-9][a-zA-Z0-9_.-]*|\"([^\\\\\x80-\xff\015\012\"]|\\\\[^\x80-\xff])+\")";
var domain = "([a-zA-Z0-9][a-zA-Z0-9._-]*\\.)*[a-zA-Z0-9][a-zA-Z0-9._-]*\\.[a-zA-Z]{2,5}";
var regex = "^"+usr+"\@"+domain+"$";
var myrxp = new RegExp(regex);
var check = (myrxp.test(field.value));
if (check!=true) {
error=true;
message_erreur.push(field.value+" "+myarray[i][2]);
}
}
}
/* Bloc 3 vérifie les champs dont la valeur doit être numérique */
else if (myarray[i][1].indexOf('n')>-1) {
var num_error = false;
if(field.value) {
var myvalue = field.value;
var num = myvalue.match(/[^0-9,\.]/gi)
var dot = myvalue.match(/\./g);
var com = myvalue.match(/,/g);
if (num!=null) {
num_error = true;
}
else if ((dot!=null)&&(dot.length>1)) {
num_error = true;
}
else if ((com!=null)&&(com.length>1)) {
num_error = true;
}
else if ((com!=null)&&(dot!=null)) {
num_error = true;
}
}
if (num_error==true) {
error = true;
message_erreur.push(myvalue+" "+myarray[i][2]);
}
}
/* Bloc 4 vérifie la valeur à l'aide d'une expression régulière sur un modèle déterminé */
else if (myarray[i][1].indexOf('r')>-1) {
var regexp = myarray[i][3];
if (field.value) {
if (!regexp.test(field.value)) {
error = true;
message_erreur.push(field.value+" "+myarray[i][2]);
}
}
}
/* Bloc 5 vérifie les champs qui doivent être formatés comme des prix et modifie éventuellement le formatage */
else if (myarray[i][1].indexOf('p')>-1) {
var myvalue = field.value;
var reg = /,-{1,}|\.-{1,}/;
var nantest_value = myvalue.replace(reg,"");
var num = nantest_value.match(/[^0-9,\.]/gi)
sep = myarray[i][1].substr(1,1)?myarray[i][1].substr(1,1):',';
if (field.value) {
var myvalue = field.value.replace(/\./,',');
if (myvalue.indexOf(',')==-1) {
field.value = myvalue+sep+'00';
}
else if (myvalue.indexOf(",--")>-1) {
field.value = myvalue.replace(/,--/,sep+'00');
}
else if (myvalue.indexOf(",-")>-1) {
field.value = myvalue.replace(/,-/,sep+'00');
}
else if (!myvalue.substring(myvalue.indexOf(',') + 2)) {
error=true;
message_erreur.push(field.value+" "+myarray[i][2]);
}
else if (myvalue.substring(myvalue.indexOf(',') + 3)!='') {
error=true;
message_erreur.push(field.value+" "+myarray[i][2]);
}
else if (num!=null) {
error=true;
message_erreur.push(field.value+" "+myarray[i][2]);
}
}
}
/* Bloc 6 vérifie les champs de nom et rectifie éventuellement la casse */
else if (myarray[i][1].indexOf('c')>-1) {
var noble = new Array(" d\'", "de","von","van","der","d","la","da","of");
var newvalue='';
var myvalue = field.value.split(/\b/);
for (k=0;k<myvalue.length;k++) {
newvalue+= myvalue[k].substr(0,1).toUpperCase()+myvalue[k].substring(1);
}
for(k=0;k<noble.length;k++){
var reg = new RegExp ("\\b"+noble[k]+"\\b","gi");
newvalue = newvalue.replace(reg,noble[k]);
}
field.value = newvalue;
}
}
/* En cas d'erreur, les messages d'erreur récoltés sont exploités ici puis affichés.
Si le formulaire est correctement rempli, il est transmis */
if (error) {
message_erreur = message_erreur.join('\n\xB7 ');
alert(message_erreur);
return false;
}
else {
return true;
}
}
|
Dans la fonction, la variable message_erreur pour les messages d'érreur est d'abord initialisée. Si aucun titre personnalisé error_hd n'a été mentionné, le message d'erreur conservera le titre standard.
Le tableau var_1 est parcouru par une boucle for
jusqu'à ce que toutes les valeurs soient vérifiées. À la ligne suivante (field
= ..) le champ de saisie est recherché à partir de la valeur name de var_1. Une instruction conditionnelle avec if/else répartit ensuite les valeurs conformément au deuxième paramètre e, n, m, r, p, p. ou bien c pour les différentes vérifications.
Dans le premier bloc, il est vérifié si un élément contient une valeur; if(!field.value) signifie: si la valeur n'existe pas ou si elle est vide. Si la condition est remplie, error est fixé sur true et le message d'erreur est placé dans le tableau message_erreur. La procédure est la même pour tous les blocs.
Dans le bloc deux une adresse électronique est vérifiée quant à sa validité formelle à l'aide d'une expression régulière. L'expression régulière provient de Christian Kruse et Antje Hofmann dans l'article
Vérification de la syntaxe de l'adresse électronique par des expressions régulières.
Le bloc trois examine les nombres de plus près. Avec les variables num, dot et com il est vérifié si figurent dans la valeur correspondante autres caractères que des chiffres, des virgules et des points. La condition qui suit if/else-s'assure que la valeur ne contient au plus qu'une virgule ou qu'un point. Cette vérification est beaucoup plus longue qu'un simple test avec isNaN(), mais présente cet avantage sur cette dernière qu'elle accepte également les virgules comme signe décimal.
Dans le quatrième bloc, la valeur entée est également examinée sur un modède déterminé avec une expression régulière et la méthode test().
Si le modèle de recherche n'est pas trouvé, un message d'erreur correspondant est sorti.
La vérification et correction du prix dans le bloc cinq travaille en partie de façon similaire à la vérification de nombres. Une valeur temporaire nantest_value, de laquelle ont été retirées les décimales éventuellement existantes ",--" et autres, peut ensuite ne contenir que des nombres. Il est ensuite procédé aux diverses transformations dans le format désiré. Si le paramètre p. (price_dot) a été mentionné, une modification correspondante s'effectue par la variable sep. Dans les deux derniers cas de la vérification de prix, les messages d'erreur pour des saisies équivoques sont préparés.
La correction du nom propre dans le bloc six tient en réalité plus d'un gadget, mais peut s'avérer très utile. Dans un premier temps, la première lettre de chaque mot est transformée en majuscule. Ensuite, les particules de noblesse sont remplacées par leur correspondance dans noble. Le tableau peut naturellement être complété à volonté.
Le script a été testé sous Debian Linux avec Mozilla 1.2.1, Konqueror 3.1, Opera 6.11 et Netscape 4.77. Avec Mozilla, Netscape et Konqueror il n'y avait aucun problème. Opera n'opérait pas correctement la correction de nom et transformait toutes les lettres hors les particules de noblesse en majuscules. Sous Windows XP professionel sans Service Pack 1 le test a été fait avec Mozilla 1.2.1, Internet Explorer 6.0, Netscape 4.08, Opera 6.04 et Opera 7 beta. Le fonctionnement était sans heurt avec Mozilla, Netscape et Internet Explorer. Opera 7 se comporta dans le test comme sous Linux, Opera 6.04 ne remplaçait pour la correction du nom que la première lettre de la chaîne de caractères.
| |
Les adresses suivantes sont recommandées pour une meilleure compréhension de l'exemple ci-dessus, ou pour apprendre d'autres possibilités et détails.
SELFHTML: Vérifier les saisies de formulaire
SELFHTML: Expressions régulières
SELFHTML:
l'objet RegExp
Vérification de la syntaxe de l'adresse électronique par des expressions régulières
|
|
SELFHTML actuel
Articles spécialisés
JavaScript |