• Article
  • Discussion
  • Voir le texte source
  • Historique

Validation de formulaires

Un article de Eric Bruyndonckx.

Sommaire

Validation des données

Pour vérifier la pertinence des données envoyées par l'utilisateur à un serveur via un formulaire (s'assurer que tous les champs nécessaires soient bien remplis, que les types de données soient corrects, etc.), on peut envisager 2 techniques (on peut les utiliser simultanément) :

  • validation coté client, par des fonctions JavaScript intégrées à la page-formulaire (voir cet exemple) : approche qui convient pour des contrôles simples (l'utilisateur pouvant contourner ces contrôles en fabriquant une requête falsifiée avec un effort de programmation minimum)
  • validation coté serveur, par le script CGI ou le programme PHP auquel ce formulaire est soumis, et renvoi du formulaire à l'utilisateur en cas de données erronées (solution la plus sûre, mais plus lourde car impliquant des allers et retours entre le client et le serveur)

Pour exécuter du code PHP en local sur votre ordinateur, installer le package :

Contrôle PHP du formulaire de contact et envoi des informations par email

Dans cet exemple, PHP vérifie que les champs Nom et Email et Message ont une valeur.

Erreur(s) affichées :

  • Le champ Nom ne doit pas être vide
  • Le champ Email ne doit pas être vide
  • Le champ Email doit être correct
  • Le champ Message ne doit pas être vide

Attention !

Notez que le code PHP qui teste votre formulaire prend place tout en haut de votre document entre les balises <?php et ?>. Le code PHP qui se trouve dans votre document permet d'afficher le contenu de vos éléments de formulaire.

Il n'est pas toujours facile de comprendre le langage PHP. Pour l'apprendre et le maîtriser : venez faire un tour sur le siteduzero.

Exemple complet 

<?php

// Inclusion du script 'Image de sécurité'

include_once ("securimage/securimage.php");

$securimage = new Securimage();

// Initialisation des variable 
 
$politesse	= isset($_POST['politesse']) ? $_POST['politesse'] : '' ;
$nom		= isset($_POST['nom']) ? $_POST['nom'] : '' ;
$prenom	= isset($_POST['prenom']) ? $_POST['prenom'] : '' ;
$adresse	= isset($_POST['adresse']) ? $_POST['adresse'] : '' ;
$adresse_2	= isset($_POST['adresse_2']) ? $_POST['adresse_2'] : '' ;
$email	= isset($_POST['email']) ? $_POST['email'] : '' ;
$message	= isset($_POST['message']) ? $_POST['message'] : '' ;
$envoyer	= isset($_POST['envoyer']) ? $_POST['envoyer'] : '' ;

$erreur =  isset($erreur) ? $erreur : '' ;

// Test des champs du formulaire 

if ($envoyer == 'Envoyer') {

	// Construction du tableau d'erreurs
	$erreur = array();

	// Si pas de politesse
	if ($politesse == '-1') { 
		   // Stock l'erreur dans le tableau d'erreur(s)
		   $erreur['politesse'] = "Pas de Politesse";
	}
        // Si pas de nom
	if (!$nom) { 
		   // Stock l'erreur dans le tableau d'erreur(s)
		   $erreur['Nom'] = "Pas de Nom";
	}
	// Si pas d'email
	if (!$email) { 
		   // Stock l'erreur dans le tableau d'erreur(s)
		   $erreur['Email1']= "Pas d'adresse email";
	}else{
		// Si email incorrect
		if (!ereg( "^[^@  ]+@([-a-zA-Z0-9]+\\.)+([a-zA-Z]{2}|net|com|gov|mil|org|edu|int)\$", $email)) {
			// Stock l'erreur dans le tableau d'erreur(s)
			$erreur['Email']= "Email incorrect";
		}
	}

	// Si pas de message
	if (!$message) { 
		   // Stock l'erreur dans le tableau d'erreur(s)
		   $erreur['Message']= "Pas de message";
	}
	// Test de l'image de sécurité
	if ($securimage->check($_POST['captcha_code']) == false) {
		 $erreur['Securite'] = "Les caractères de l'image de sécurité ne correspondent pas";
	}
	// On enregistre dans la variable '$nb_erreur', le nombre d'erreurs
	$nb_erreur = count($erreur);
	
	// Si pas d'erreur
	if (!$nb_erreur){


		// Définition des variables de la fonction 'mail'
		$destinataire	= "eric.bruyndonckx@gmail.com";
		$sujet		= "".date('d.m.Y h:i:s')."Formulaire de contact";
		$texte		= "<table cellpadding='3' border='1'>	
				        <tr>
						<td width='400' colspan='2'>
							<img src='http://www.ebx.ch/~fc2010/eric/images/heig-vd-logo-200.jpg' 
							alt='Logo' title='Logo heig-vd' width='200' height='70
							' />
						</td>
					</tr>
					<tr>
						<td width='200'><span style='font-weight: bold;'>Nom</span> :</td><td width='200'>$nom</td>
					</tr>
					<tr>
						<td width='200'>Prénom :</td><td width='200'>$prenom</td>
					</tr>
					
					<tr>
						<td width='200'>Adresse :</td><td width='200'>$adresse</td>
					</tr>
					<tr>
						<td width='200'>Adresse 2:</td><td width='200'>$adresse_2</td>
					</tr>
					<tr>
						<td width='200'>Message:</td><td width='200'>$message</td>
					</tr>
				</table>";
   
  		// Construction du mail d'erreurs envoyé au webmaster 
  		$headers  = "MIME-Version: 1.0\r\n";
  		$headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
  		$headers .= "From: $email\r\n";
  		$headers .= "Cc: eric.bruyndonckx@gmail.com\r\n";
  		mail($destinataire,$sujet,stripslashes($texte),$headers);
	
  		// Redirection sur l'une des pages ('$page') de notre choix après '$duree' secondes
  		$page = "page.html";
  		$duree = "5";
  		header("location:$page");

	}
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Mon formulaire</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 </head>
<body>
<h1>Vérification de formulaire avec PHP</h1>

<?php 
	
	// Si il y a une/des erreur(s)
	if($erreur){

		// On affiche sous forme de liste chaque texte d'erreur stocké dans notre tableau '$erreur'
		echo "<h3>Errreur(s)</h3>";
		echo "<ul>";

		foreach ($erreur as $errreurTexte) {
			echo "<li>".$errreurTexte."</li>" ;
		}

		echo "</ul>";

		// Envoi des erreurs par mail au webmaster
		$destinataire	= "eric.bruyndonckx@gmail.com";
		$sujet		= "".date('d.m.Y h:i:s')." Erreur(s) Formulaire de contact";
		$texte		= "<strong>Erreurs : </strong><br/>".$nom."<br/><hr/>";

		foreach ($erreur as $err) {
  		$texte .= " $err<br/>";
	}
   
	// Construction du mail d'erreurs envoyé au webmaster 
	$headers  = "MIME-Version: 1.0\r\n";
	$headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
	$headers .= "From: $email\r\n";
	$headers .= "Cc: eric.bruyndonckx@gmail.com\r\n";
	mail($destinataire,$sujet,stripslashes($texte),$headers);
	
	}

?>

<!-- Notre formulaire sera envoyé sur la même page '$_SERVER['SCRIPT_NAME']'-->
<form action="<?php echo $_SERVER['SCRIPT_NAME'];?>" method="POST">

<table width="400" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Votre Nom</td>
    <td>
      <input type="text" name="Nom" size="30" value="<?php echo $nom ;?>">
    </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>Votre Email</td>
    <td><input type="text" name="Email" size="30" value="<?php echo $email ;?>"></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>Votre commentaire</td>
    <td><textarea name="Message" rows="5" cols="30"><?php echo $message ;?></textarea></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td><img id="captcha" src="securimage/securimage_show.php" alt="CAPTCHA Image" /><br/><br/><input type="text" name="captcha_code" size="25" maxlength="6" /><br/><br/><a href="#" onclick="document.getElementById('captcha').src = 'securimage/securimage_show.php?' + Math.random(); return false">Recharger l'image</a></td>
  </tr>
  <tr>
    <td> </td>
    <td><input type="submit" name="Envoyer" value="Envoi">
      <input type="reset" name="Effacer" value="Effacer"></td>
  </tr>
</table>
</form>
</body>
</html>

Contrôle Javascript du formulaire

Dans cet exemple, JavaScript ne vérifie que si les champs Nom et Email ont une valeur. Ainsi il est possible d'envoyer une réponse faite d'espaces blancs.

Attention !

Notez que les fonctions Javascript prennent placent entre les balises head></head> de votre document. L'appel de ces fonctions se fait par le biais du bouton Envoi.

Exemple complet 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd"> 
 <html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Mon formulaire</title>
  
	<script language="JavaScript">

	function checkBlank(input,msg)
	{
	  
	  if (input.value == null || input.value.length == 0) {
		alert ("Il faut remplir les champs Nom et Email");
		return false;
	  }
	  return true;
	}
	function checkForm(Contact)
	{
	  if (
		  !checkBlank(Contact.Nom) ||
		  !checkBlank(Contact.Email)) {
		return false;
	  }
	  Contact.submit();
		alert ("Merci pour votre reponse ...");
	  return true;
	}
</script>

</head>
<body>
<h1>Vérification de formulaire avec Javascript</h1>
<form name="Contact" action="mailto:eric.bruyndonckx@heig-vd.ch" method="POST" enctype="text/plain">
<table width="400" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Votre Nom</td>
    <td><input type="text" name="Nom" size="30"></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>Votre Email</td>
    <td><input type="text" name="Email" size="30"></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>Votre commentaire</td>
    <td><textarea name="Commentaires" rows="5" cols="30"></textarea></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td><input type="button" value="Envoi" onClick="checkForm(this.form)">
      <input type="reset" value="Effacer"></td>
  </tr>
</table>
</form>
</body>
</html>


Astuces Javascript

Placer le curseur dans une champ donnée

A l'appel du formulaire, placez le curseur dans un champ donné d'un formulaire comportant plusieurs champs. Utiliser la fonction JavaScript focus() sur ce champ.

2 méthodes :

Dans la balise <body> 

<body onload="document.forms.form.champ.focus();">

Explications :

Lors du chargement de votre page, l'élément onload appellera le script Javascript : document.forms.form.champ.focus();

  • Pour document.forms., laissez tels quels.
    • document., indique le document où se trouve votre formulaire.
    • forms., indique le ou les formulaires dans votre document.
  • Pour form., mentionnez le nom de votre formulaire, défini par l'élément name dans la balise <form>.
  • Pour champ., mentionnez le nom de votre champ, défini par l'élément name dans la balise <input type="texte">.
  • Pour focus();, il s'agit de la fonction Javascript utilisée. Laissez tel quel. Attention à ne pas oublier le ; !

Code JavaScript suivant placé après la déclaration du champ 

<script language="javascript">
<!--
 Code Javascript
//-->
</script>
<noscript>
 Contenu, si Javascript est impossible
</noscript>

Exemples

Dans la balise <body> 
<body onload="document.forms.contact.Nom.focus();">
<h1>Mon formulaire de contact</h1>
<form name="contact" method="post" action="">
  <table width="400" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="150">N° Client : </td>
      <td width="250"><input name="NoClient" type="text" value="1234" size="10" /></td>
    </tr>
    <tr>
      <td width="150"> </td>
      <td width="250"> </td>
    </tr>
    <tr>
      <td width="150">Nom : </td>
      <td width="250"><input name="Nom" type="text" size="30" /></td>
    </tr>
  </table>
</form>
</body>
Code JavaScript suivant placé après la déclaration du champ 
<body>
<h1>Mon formulaire de contact</h1>
<form name="contact" method="post" action="">
  <table width="400" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="150">N° Client : </td>
      <td width="250"><input name="NoClient" type="text" value="1234" size="10" /></td>
    </tr>
    <tr>
      <td width="150"> </td>
      <td width="250"> </td>
    </tr>
    <tr>
      <td width="150">Nom : </td>
      <td width="250"><input name="Nom" type="text" size="30" />
	<script language="javascript">
          <!--
            document.forms.contact.Nom.focus();
	  //-->
	</script>
	<noscript>
           Contenu, si Javascript est impossible
	</noscript>
      </td>
    </tr>
  </table>
</form>
</body>

Sélectionner ou effacer le contenu d'un champ

Sélectionner le contenu d'un champ

Lorsque l'on clique dans un champ , utiliser l'évènement onFocus="this.select();" 

<input type="text" name="nom" 
       value="Entrez votre nom" onFocus="this.select();">

Effacer le contenu d'un champ

Lorsque l'on clique dans un champ , utiliser l'évènement onFocus="this.value='';" 

<input type="text" name="nom" value="Entrez votre nom" 
       onFocus="this.value=´´;">

Remarque :

  • Pour this.value=´´;, utilisez des guillements simples.
Exemples combinés 
<body>
<h1>Mon formulaire de contact</h1>
<form name="contact" method="post" action="">
  <table width="400" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="150">N° Client : </td>
      <td width="250"><input name="NoClient" type="text" value="1234" size="10"/></td>
    </tr>
    <tr>
      <td width="150"> </td>
      <td width="250"> </td>
    </tr>
    <tr>
      <td width="150">Nom : </td>
      <td width="250"><input name="Nom" type="text" size="30" value="Entrez votre nom" onfocus="this.select();"/></td>
    </tr>
    <tr>
      <td width="150"> </td>
      <td width="250"> </td>
    </tr>
    <tr>
      <td width="150">Prenom : </td>
      <td width="250"><input name="Prenom" type="text" size="30" value="Entrez votre prenom" onfocus="this.value='';"/></td>
    </tr>
  </table>
</form>
</body>


Voir aussi

Récupérée de « http://www.ebx.ch/mediawiki1/index.php/Validation_de_formulaires »