validation d'un formulaire

références

          DOM (Document Object Model) Reference

la collection forms[ ]

La collection forms[ ] fait partie de l'objet document. La collection est un array avec l'index à partir de 0, forms[0] étant le premier form dans le document, etc.

Il peut y avoir plusieurs forms dans un document. Ils seront identifiés par leur index :
      document.forms[0], document.forms[1], etc.

On peut aussi référer à un form par son nom (name) :
      document.formulaire1

Avec ceci :

<form name="forme1">
Premier nombre : <input type="text" name="valeur1" value="" >

Deuxième nombre : <input type="text" name="valeur2" value="" >

<input type="Button" name="btnCalc" value="Calcul" onclick="calculer()">

Résultat : <input type="text" name="valeur3" value="" >

</form>


L'instruction suivante :
      x = document.forme1.length;
      document.write("Éléments dans forme1 = " + x);

La propriété length affiche le nombre d'éléments dans 'forme1'
- (il y 3 text et 1 Button), comme :

Éléments dans forme1 = 4



la collection elements[ ]

La collection elements[ ] est un array contenant tous les objet du form.

On peut référer à un élément par son nom :
      document.forme1.prenom
mais ça peut être utile de pouvoir regarder tous les éléments avec une boucle.

La méthode getElementById() de document va récupérer tous les éléments de l'objet ave l'Id spécifié. dans l'exemple, tous les objets de 'myForm'.

<html>
<body>

<form id="myForm">
Prénom: <input id="fname" type="text" value="Jos" />
Nom famille: <input id="lname" type="text" value="Montferrand" />
<input id="sub" type="button" value="Envoyer" />
</form>

<p>La valeur de tous les éléments:
<script type="text/javascript"> var x=document.getElementById("myForm"); for (var i=0;i<x.length;i++) { document.write(x.elements[i].value); document.write("<br />"); } </script> </p> </body> </html>


Avec le résultat suivant :




le mot this

this représente l'objet courant. Ça évite d'avoir à le nommer au complet.

Dans le cas d'un form, this est le form dans lequel on travaille.

Avec un autre objet, on peut s'en servir pour valider, comme ceci :

<input type="text" name="courriel"  onChange="teste_courriel(this)">

....

function teste_courriel(objet)
{
    var courrielOK = true;
    apos=objet.value.indexOf("@");
    dotpos=objet.value.lastIndexOf(".");
    lastpos=objet.value.length-1;
    if (apos<1)
    {
      courrielOK = false;
      objet.select();
      objet.focus();
    }
   return courrielOK;
}



validation d'un texte

Pour valider un texte on utilise la propriété value.

<input type="text" name="Age" onChange="valide(this,'Age n'est pas valide')">

....

function valide(objet,texte)
{
	if (objet.value.length < 1 || objet.value > 77 || objet.value < 7)
	{
	alert(texte)
	}
}
	



validation de boutons et checkbox

Pour valider les radio button et les checkbox on utilise la propriété checked de ces objets.

Il faut noter que les éléments à cocher résident dans un array. On peut identifier les éléments individuellement par leur index, ou on peut les manipuler avec une boucle.

Par exemple, si j'ai le choix de 4 boutons pour 'etape' dans le form, chacun des 4 boutons peut être cliqué comme :
            formulaire.bouton[0].checked = true
            formulaire.bouton[1].checked = true
            formulaire.bouton[2].checked = true
            formulaire.bouton[3].checked = true

Mais c'est plus pratique d'utiliser un for comme :

	function verifier()
	{ 
	var toutOK = false;
	var etapeOK = false; 
	for (i=0; i<formulaire.etape.length; ++ i)
  		{
  		if (formulaire.etape[i].checked)
    		{
		etapeOK = true;
    	 	}
 		 }
	return etapeOK;
	}




arrêter l'envoi d'un form

Pour empêcher d'envoyer un form s'il contient une erreur on utilise le onSubmit dans le tag <form>. Par exemple, si je veux annuler l'envoi si l'étape n'est pas choisie dans l'exemple précédent :

<form method="post" name="formulaire"  onSubmit="return verifier()" 
			action="mailto:votrenom@votremail.com">





Haut de la page

Précédente            Suivante