nanoum.net, intégration html/xhtml, css, javascript

javascript

derniers articles

archives

syndication rss

controle des champs de formulaire - part 1mardi 03 mai 2005

Voici une fonction permettant de vérifier que les champs obligatoires d'un formulaire aient bien été remplis qui se base essentiellement sur les labels des champs.

En règle général, lorsque l'on veut rendre des champs de formulaire obligatoires, on les signale comme tels au visiteur.

L'indication des éléments qui sont obligatoires peut se faire par exemple :
- en appliquant une classe spécifique au label du champ (tous les champs nécessaires ont un label dont le texte sera rouge)
- en utilisant une astérisque qui renvoie à une légende (ou toute autre chaîne de caractère) qui se verra répétée dans chaque label


Petit rappel sur les label :

Dans un formulaire, un label permet de donner un titre à un champ.
Un label peut être lié explicitement ou implicitement à un champs :
- implicitement : le champ se trouve à l'intérieur des balises label
- explicitement : le champ doit avoir son attribut id de renseigné, cette même valeur est donnée à l'attribut for de la balise label, ce qui permet de les lier

Les formulaires pourront être du type :<form action="page.html" method="post"><p>
<label class="rouge">Nom : <input name="nom" type="text"></label>
<label for="prenom" class="rouge">Prénom : </label>
<input name="prenom" type="text" id="prenom">
<input type="submit" value="Envoyer">
</p></form>

Ou encore : <form action="page.html" method="post"><p>
<label>Nom* : <input name="nom" type="text"></label>
<label for="prenom">Prénom* : </label>
<input name="prenom" type="text" id="prenom">
* Champs obligatoires
<input type="submit" value="Envoyer">
</p></form>

La fonction suivante se base sur ce type d'indications.
Elle ne pourra donc fonctionner que si l'on utilise une classe spécifique pour les labels des champs obligatoires ou si l'on place une même chaîne de caractère dans chacun de ces labels.
Il faudra juste assigner à une variable le nom de la classe (variable test_class) ou la chaîne de caractère (variable test_text), peu importe le nom des champs, leur id, ou leur nombre.

Dans le cas des listes de sélection, la fonction est prévue pour qu'il y ait une option pré-sélectionnée n'ayant aucune valeur (value=""). Cette option ne pourra être reconnue comme valide si le choix dans la liste est obligatoire.
Toutes les autres options devront par contre avoir un texte et une valeur définis.
On ne se réfère donc pas au label pour les listes d'option.

La fonction javascript :

test_text = "";
test_class = "";
message = "merci de remplir tous les champs obligatoires";
function verif_form(formulaire) {
vide = 0;
for ( var i=0; i<formulaire.getElementsByTagName("label").length; i++ ) {
element_label = formulaire.getElementsByTagName("label")[i];
txt_label = element_label.firstChild.nodeValue;
class_label = element_label.className;
if ( (test_text != "" && txt_label.indexOf(test_text) != -1) || (test_class != "" && class_label == test_class) ) {
if ( element_label.getAttribute("htmlFor") || element_label.getAttribute("for") ) {
if ( document.all ) id_champs = element_label.getAttribute("htmlFor");
else id_champs = element_label.getAttribute("for");
champs = document.getElementById(id_champs);
if ( champs.tagName == "INPUT" && champs.getAttribute("type") == "text" ) {
if ( champs.value == "" ) vide ++;
}
else if ( champs.tagName == "TEXTAREA" && champs.value == "" ) vide ++;
}
else {
if ( element_label.getElementsByTagName("input")[0] ) {
input_label = element_label.getElementsByTagName("input")[0];
if ( input_label.getAttribute("type") == "text" && input_label.value == "" ) vide ++;
}
else if ( element_label.getElementsByTagName("textarea")[0] && element_label.getElementsByTagName("textarea")[0].value == "" ) vide ++;
}
}
}
for (var j=0; j<formulaire.getElementsByTagName("select").length; j++ ) {
liste = formulaire.getElementsByTagName("select")[j];
for ( var k=0; k<liste.options.length; k++) {
if ( liste.options[k].selected == true && liste.options[k].value == "" ) vide ++;
}
}
if ( vide != 0 ) {
alert(message);
return false;
}
else {
return true;
}
}

La fonction est un peu longue mais elle permet ainsi d'automatiser en grande partie la vérification des formulaires.
Elle peut aussi être simplifiée selon les besoins.

exemple de formulaire utilisant cette fonction

L'explication plus en détail du code javascript est à suivre dans la seconde partie : controle des champs de formulaire - partie 2

Commentaires momentanément fermés. Merci de votre compréhension.