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

javascript

derniers articles

archives

syndication rss

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

Suite à la présentation de la fonction de vérification de formulaire : controle des champs de formulaire - partie 1, voici une explication plus en détail du code utilisé.

Les variables :

Deux variables test_text et test_class sont présentes en début de code. Une seule des deux doit être renseignée selon que l'on met en évidence les champs par une classe css ou par un mot dans le label.
S'il s'agit d'une classe, on attribue son nom à la variable test_class.
S'il s'agit d'une chaîne de caractère, on affecte celle-ci à la variable test_text.
La variable message permet de définir le texte affiché dans la fenêtre d'alerte qui se lancera si le formulaire n'est pas entièrement rempli.

test_text = "";
test_class = "";
message = "merci de remplir tous les champs obligatoires";

Analyse des labels :

Grâce à la fonction getElementsByTagName() on construit une boucle qui va passer en revue tous les labels de la fonction.
Pour chacun, on récupère le texte présent entre les balises ainsi que la classe appliquée.
On teste quelle variable à été renseignée (test_class ou test_text), s'il s'agit de la classe, on la compare avec celle du label, s'il s'agit d'une chaîne de caractères on la compare avec le texte du label.

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) ) {

Lorsqu'un label indique que le champ doit être renseigné, on va ensuite rechercher le champ qui lui correspond pour vérifier son contenu.

Accès au champ d'après son label (cas des labels explicites) :

Chaque label est lié à un champ grâce à l'attribut for de la balise label dont la valeur est égale à l'id du champ correspondant (for de label = id de input par exemple).
On récupère donc la valeur de for avec getAttribute(). Cependant, il faudra faire attention car pour internet explorer, for s'obtient avec getAttribute("htmlFor") alors que sous les autres navigateurs on utilise simplement getAttribute("for").

Avec la valeur récupérée, on peut facilement cibler le champ en utilisant document.geElementById().
On vérifie ensuite qu'il s'agit bien d'un input de type=text ou d'un textarea avec tagName qui nous renvoie le nom de la balise.
Enfin, on teste la valeur du champ, si le champ est vide alors on incrémente la variable nommée vide.

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 ++;
}

Accès au champs d'après son label (cas des labels implicites) :

Ici, le champ se trouve à l'intérieur des balises label.
Il suffit donc de tester avec getElementsByTagName() si le label contient un input text ou un textarea et de vérifier la valeur de celui-ci.

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 ++;
}
}

Cas des listes d'options :

Pour les listes, on part du principe que si la liste est obligatoire, l'option pré-sélectionnée ne peut pas être celle valide, elle n'a pas d'attribut value.
Avec une boucle qui va analyser chaque option de l'élément select, on va pouvoir regarder si l'option sélectionnée a une valeur.

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 ++;
}
}

Fin de fonction :

Pour chaque élément analysé, si le champ devait être obligatoire et qu'il s'avérait être vide, on a incrémenté la variable nommée vide.
Si vide est différent de 0, alors on affiche une alerte et le formulaire n'est pas envoyé, sinon la fonction retourne la valeur true et le formulaire est envoyé normalement.

if ( vide != 0 ) {
alert(message);
return false;
}
else {
return true;
}

Lancement de la fonction :

La fonction est à lancer lorsque le formulaire est envoyé, on utilisera donc l'événement onsubmit.
Il faut également cibler le formulaire concerné et le passer en paramêtre de la fonction.window.onload = function() {
document.getElementsByTagName("form")[0].onsubmit =
function () { return verif_form(this); }
}Sans oublier de faire un return sur la fonction pour que le formulaire ne soit pas envoyé lorsqu'il est incomplet

voir la page d'exemple

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