Vérifier les champs formulaire / colorer les champs faux

Vérifier les champs formulaire / colorer les champs faux

Le but du jeu

Nous allons voir comment vérifier les champs d'un formulaire, afficher une alerte et colorer les champs qui sont vide ou qui ne correspondent pas à nos attentes pour améliorer la lisibilité pour l'utilisateur. De plus nous souhaitons remettre nos champs à la couleur initiale lorsque l'utilisateur commence à remplir les champs vides après l'alerte.

Le détail de nos besoins

Nous avons donc besoin :

d'un formulaire.
d'une fonction qui va rétablir la couleur initiale des champs vérifiés lorsque l'utilisateur va saisir un élément. (cette fonction sera donc appelé par chacun des champs). Nous la nommerons “function couleur(obj)”.
d'une fonction qui va vérifier les champs du formulaire et colorer les champs non conformes à nos souhaits. (cette fonction sera donc appelé par le formulaire). Nous la nommerons “function check()”.

Notre formulaire

Nous allons créer un formulaire avec 3 champs, nom, prenom et mail.

<html>
<head>
<title>Test de vérification de formulaire</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body>
<!--
Nous appelons donc notre future fonction à la soumission du formulaire qui va je le rapelle vérifier nos champs
-->
<form action="page.html" method="post" enctype="application/x-www-form-urlencoded" name="formulaire"  onSubmit="return check();">
 
<!--
sur chaqu'un des champs nous appelons la fonction qui va rétablir la couleur initiale 
--> 
Nom : <input name="nom" type="text" onKeyUp="javascript:couleur(this);"><br>
Prenom : <input name="prenom" type="text" onKeyUp="javascript:couleur(this);"><br>
Mail : <input name="mail" type="text" onKeyUp="javascript:couleur(this);" ><br>
<input type="submit" name="Submit" value="Envoyer">   
</form>
</body>
</html>

Nos fonctions

Nous allons créer la fonction qui rétablie la couleur des champs et appeler à l'action onKeyUp par chaque champs.

//nous appliquons simplement une couleur d'arrière plan aux objets traités, 
function couleur(obj) {
     obj.style.backgroundColor = "#FFFFFF";
}

Nous allons créer maintenant notre fonction qui va vérifier les champs et qui va retourner une alerte dans les cas où les champs nom et prenom sont vide et le champs mail vide ou douteux. Notre vérification va porter sur le . et @

function check() {
	var msg = "";
 
//Vérification du mail s'il n'est pas vide on vérifie le . et @
 
		if (document.formulaire.mail.value != "")	{
		indexAroba = document.formulaire.mail.value.indexOf('@');
		indexPoint = document.formulaire.mail.value.indexOf('.');
		if ((indexAroba < 0) || (indexPoint < 0))		{
 
//dans le cas ou il manque soit le . soit l'@ on modifie la couleur d'arrière plan du champ mail et définissons un message d'alerte
 
			document.formulaire.mail.style.backgroundColor = "#F3C200";
			msg += "Le mail est incorrect\n";
		}
	}
 
//Notre champs mail est vide donc on change la couleur et on défini un autre message d'alerte
 
	else	{
		document.formulaire.mail.style.backgroundColor = "#F3C200";
		msg += "Veuillez saisir votre mail.\n";
	}
 
//ici nous vérifions si le champs nom et vide, changeons la couleur du champs et définissons un message d'alerte
if (document.formulaire.nom.value == "")	{
		msg += "Veuillez saisir votre nom\n";
		document.formulaire.nom.style.backgroundColor = "#F3C200";
	}
 
//meme manipulation pour le champ prénom
if (document.formulaire.prenom.value == "")	{
		msg += "Veuillez saisir votre prenom\n";
		document.formulaire.prenom.style.backgroundColor = "#F3C200";
	}
 
//Si aucun message d'alerte a été initialisé on retourne TRUE
	if (msg == "") return(true);
 
//Si un message d'alerte a été initialisé on lance l'alerte
	else	{
		alert(msg);
		return(false);
	}
}

Voici donc nos deux fonctions créées que nous allons insérer dans le head de notre page de cette façon :

<script language="JavaScript">
<!--
function couleur(obj) {
     obj.style.backgroundColor = "#FFFFFF";
}
 
function check() {
	var msg = "";
 
		if (document.formulaire.mail.value != "")	{
		indexAroba = document.formulaire.mail.value.indexOf('@');
		indexPoint = document.formulaire.mail.value.indexOf('.');
		if ((indexAroba < 0) || (indexPoint < 0))		{
		document.formulaire.mail.style.backgroundColor = "#F3C200";
			msg += "Le mail est incorrect\n";
		}
	}
	else	{
		document.formulaire.mail.style.backgroundColor = "#F3C200";
		msg += "Veuillez saisir votre mail.\n";
	}
 
if (document.formulaire.nom.value == "")	{
		msg += "Veuillez saisir votre nom\n";
		document.formulaire.nom.style.backgroundColor = "#F3C200";
	}
 
if (document.formulaire.prenom.value == "")	{
		msg += "Veuillez saisir votre prenom\n";
		document.formulaire.prenom.style.backgroundColor = "#F3C200";
	}
 
	if (msg == "") return(true);
	else	{
		alert(msg);
		return(false);
	}
}
//-->
</script>

Tutorial de stef

Forums Développement Multimédia

Vérifier les champs formulaire / colorer les champs faux

Le but du jeu

Le détail de nos besoins

Notre formulaire

Nos fonctions