Bonjour,
Si vous souhaitez valider votre formulaire en php, vous souhaiterez certainement que les listes cochées ou affichées initialement, restent cochées ou affichent les mêmes valeurs lors du rechargement de la page du formulaire pour correction par le visiteur.
On peut faire le code suivant :
<?php
//Si on travaille en utf-8
header('Content-type: text/html; charset=UTF-8');
if (!session_id()) session_start();//déclare l'ouverture d'une session si aucune n'a été déclarée auparavant.
if (isset($_POST['envoyer']))
{
function Verif_magicquotes ($chaine)// fonctin qui applique stripslashes si get_magic_quotes_gpc() est activé
{
if (get_magic_quotes_gpc()) $chaine = stripslashes($chaine);
return $chaine;
}
$message = array();// Pour enregistrer les messages d'information
$_SESSION['post_form']['message'] =& $message;// avec & on assigne $message à $_SESSION['post_form']['message'] c.a.d. tout changement dans $message sera répercuté dans $_SESSION['post_form']['message'] (et inversement).
$_SESSION['post_form']['cat'] = $cat = isset($_POST['cat']) && trim($_POST['cat']) != '' ? Verif_magicquotes(trim($_POST['cat'])) : null;
$_SESSION['post_form']['selection'] = $selection = isset($_POST['selection']) && trim($_POST['selection']) != '' ? Verif_magicquotes(trim($_POST['selection'])) : null;
$_SESSION['post_form']['nom'] = $nom = isset($_POST['nom']) && trim($_POST['nom']) != '' ? Verif_magicquotes(ucfirst(trim($_POST['nom']))) : null;//ucfirst pour convertir le première lettre en majuscule
$_SESSION['post_form']['prenom'] = $prenom = isset($_POST['prenom']) && trim($_POST['prenom']) != '' ? Verif_magicquotes(ucfirst(trim($_POST['prenom']))) : null;//ucfirst pour convertir le première lettre en majuscule
$_SESSION['post_form']['numtel'] = $numtel = isset($_POST['numtel']) && trim($_POST['numtel']) != '' ? Verif_magicquotes(trim($_POST['numtel'])) : null;
$_SESSION['post_form']['codepostal'] = $codepostal = isset($_POST['codepostal']) && trim($_POST['codepostal']) != '' ? Verif_magicquotes(trim($_POST['codepostal'])) : null;
$_SESSION['post_form']['ville'] = $ville = isset($_POST['ville']) && trim($_POST['ville']) != '' ? Verif_magicquotes(trim($_POST['ville'])) : null;
if (!isset($cat))
{
$message[] = 'Veuillez choisir une catégorie';
}
if (!isset($selection))
{
$message[] = 'Veuillez choisir une option dans la seconde liste déroulante';
}
if (isset($nom))
{
if (! preg_match('#^[a-zéèàçïêë ]{3,18}$#i',$nom))
{
$message[] = 'Le nom "'.$nom.'" n\'est pas valide. Minimum 3 lettres, maximum 18. Chiffres non autorisés. Recommencez !';
}
}
else
{
$message[] = 'Veuillez indiquer votre nom';
}
if (isset($prenom))
{
if (! preg_match('#^[a-zéèàçïêë ]{3,18}$#i',$prenom))
{
$message[] = 'Le prénom "'.$prenom.'" n\'est pas valide. Minimum 3 lettres, maximum 18. Chiffres non autorisés. Recommencez !';
}
}
else
{
$message[] = 'Veuillez indiquer votre prénom';
}
if (isset($numtel))
{
if (!(preg_match("#^0[0-9]([-. ]?[0-9]{2}){4}$#", $numtel)))
{
$message[] = 'Le numéro de télélphone "'.$numtel.'" n\'est pas valide. Recommencez !';
}
}
else
{
$message[] = 'Veuillez indiquer un numéro de téléphone';
}
if (isset($codepostal))
{
if (! preg_match('#^[0-9]{5}$#',$codepostal))
{
$message[] = 'Le code postal doit être un nombre de 5 chiffres';
}
}
else
{
$message[] = 'Veuillez indiquer le code postal';
}
if (!isset($ville))
{
$message[] = 'Veuillez indiquer la ville';
}
if (isset($message) && count($message) == 0)
{
//Effacement éventuel des variables de session (ou ne pas effacer si l'on veut garder les champs de formulaires remplis suite à une redirection sur cette même page)
//unset($_SESSION['post_form']);
// Connexion à la base de données pour enregistrement des données...
//...
$message[] = 'insciption ok';// pour les besoins de la démo
header('Location: '.$_SERVER['PHP_SELF']);// pour les besoins de la démo
}
else
{
header('Location: '.$_SERVER['PHP_SELF']);// redirige vers la page en cours en cas d'erreur (car count($message) > 0)
exit;
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Listes liées HTML JAVASCRIPT</title>
<script type="text/javascript">
<!--
function Affiche_liste(id_ensemble_select,id_select)
{
// Sélection du bloc contenant les sélections liées (id = "categorie" dans notre exemple)
var id_ensemble_select = document.getElementById(id_ensemble_select);
// Sélection de la sélection liée
var id_select = document.getElementById(id_select);
if(id_ensemble_select)
{
//Initialisation d'une variable pour contenir un tableau.
var tab = new Array();
// Cherche les balises select inlues dans le bloc (id = "categorie" dans notre exemple) contenant les sélections liées et les retourne dans un tableau
tab = id_ensemble_select.getElementsByTagName('select');
var tablength = tab.length;
// Liste les éléments du tableau
for (i=0; i < tablength; i++)
{
// Met les selects en disable = true et les cache avec style.display = 'none'
tab[i].disabled = true;
if(id_select) tab[i].style.display = 'none';// si select est vide on ne fait rien
}
// Met la sélection liée sélectionné en disable = false et l'affiche avec style.display = 'inline'
if(id_select)
{
id_select.disabled = false;
id_select.style.display = 'inline';
}
}
}
// Affiche la liste sélectionnée et l'élément sélectionné au rechargement de la page
function Affiche_liste_selected(id_ensemble_select, value_select_1, value_select_2)
{
//sélection de l'élément, avec getElementById, de la catégorie sélectionnée
var id_selection = document.getElementById(value_select_1);
if(id_selection)
{
// Appel à la fonction Affiche_liste pour afficher la sous catégorie correspondante et mettre les autres en disabled = true;
Affiche_liste(id_ensemble_select,value_select_1);
var id_selectionlength = id_selection.length;
//liste les éléments du tableau
for (i=0; i < id_selectionlength; i++)
{
// on regarde si l'option du select est égal à la valeur de l'option 2 sélectionnée
if (id_selection.options[i].value == value_select_2)
{
// Si oui on le sélectionne
id_selection.options[i].selected = true;
}
}
}
}
// fonction générique permettant un appel aux fonctions javascript dès le chargement de la page.
function AddLoad_AFS(func) {
if (window.addEventListener)
{
window.addEventListener("load", func, false);
}
else if (document.addEventListener)
{
document.addEventListener("load", func, false);
}
else if (window.attachEvent)
{
window.attachEvent("onload", func);
}
}
<?php if (isset($_SESSION['post_form']['cat']))
{
$value_select_1 = $_SESSION['post_form']['cat'];
$value_select_2 = isset($_SESSION['post_form']['selection'])? $_SESSION['post_form']['selection'] : null;
?>
// Appel à la fonction générique de cbargement onload qui appelle la fonction Affiche_liste_selected avec comme arguments l'id du bloc contenant les sélections liées, la valeur de la catégorie sélectionnée (= à l'id du bloc du select lié) et la valeur de l'option sélectionnée dans la deuxième liste.
AddLoad_AFS(function(){Affiche_liste_selected('categorie','<?php echo $value_select_1?>','<?php echo $value_select_2?>')});
<?php } ?>
-->
</script>
<style type="text/css">
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
}
p, input, select, form, option
{
padding:0;
margin:0;
}
#form_identification p
{
padding:0.5em;
}
/*.categorie {
width:1.2em;
padding:0;
margin-right: 1em;
}
*/
#categorie, #liste1
{
height:1.5em;
display:inline;
}
#categorie select
{
display:none;
}
</style>
</head>
<body>
<div style="width:48em;margin:auto; border:1px solid black;padding:1em">
<form action="#" method="post" id = "form_identification">
<p style="font-size:0.9em; font-style:italic;margin-bottom:1em">Cochez une des catégories ci-dessous, puis une option dans la liste qui s'affichera en fonction de votre choix. </p>
<div>
<p id="liste1">
<!--
<label for="choix_cadets">Cadets</label>
<input type="radio" id = "choix_cadets" name = "cat" value = "cadets" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" <?php if (isset($_SESSION['post_form']['cat']) && $_SESSION['post_form']['cat'] == "cadets") echo 'checked = "checked"'; ?> />
<label for="choix_juniors">Juniors</label>
<input type="radio" id = "choix_juniors" name = "cat" value = "juniors" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" <?php if (isset($_SESSION['post_form']['cat']) && $_SESSION['post_form']['cat'] == "juniors") echo 'checked = "checked"'; ?> />
<label for="choix_seniors">Seniors</label>
<input type="radio" id = "choix_seniors" name = "cat" value = "seniors" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" <?php if (isset($_SESSION['post_form']['cat']) && $_SESSION['post_form']['cat'] == "seniors") echo 'checked = "checked"'; ?> />
-->
<select name = "cat" class = "categorie" onchange = "Affiche_liste(this.className,this.value)" />
<option value = "">«Choisissez»</option>
<option value = "cadets" <?php if (isset($_SESSION['post_form']['cat']) && $_SESSION['post_form']['cat'] == "cadets") echo 'selected = "selected"'; ?>>Cadets</option>
<option value = "juniors" <?php if (isset($_SESSION['post_form']['cat']) && $_SESSION['post_form']['cat'] == "juniors") echo 'selected = "selected"'; ?>>Juniors</option>
<option value = "seniors" <?php if (isset($_SESSION['post_form']['cat']) && $_SESSION['post_form']['cat'] == "seniors") echo 'selected = "selected"'; ?>>Seniors</option>
</select>
</p>
<p id = "categorie">
<select name = "selection" id = "cadets" style= "display:inline" disabled="disabled">
<option value = "">«Choisissez»</option>
<option value = "cadet1">Cadet 1</option>
<option value = "cadet2">Cadet 2</option>
</select>
<select name = "selection" id = "juniors">
<option value = "">«Choisissez»</option>
<option value = "junior1">Junior 1</option>
<option value = "junior2">Junior 2</option>
</select>
<select name = "selection" id = "seniors">
<option value = "">«Choisissez»</option>
<option value = "senior1">Senior 1</option>
<option value = "senior2">Senior 2</option>
<option value = "senior3">Senior 3</option>
</select>
</p>
</div>
<div style="margin-top:2em">
<p>
<label for="nom"> Nom :</label>
<input type="text" id="nom" name="nom" value="<?php echo (isset($_SESSION['post_form']['nom'])) ? $_SESSION['post_form']['nom'] : '' ?>" />
</p>
<p>
<label for="prenom"> Prénom :</label>
<input type="text" id="prenom" name="prenom" value="<?php echo (isset($_SESSION['post_form']['prenom'])) ? $_SESSION['post_form']['prenom'] : '' ?>" />
</p>
<p>
<label for="numtel"> N°de téléphone :</label>
<input type="text" id="numtel" name="numtel" value="<?php echo (isset($_SESSION['post_form']['numtel'])) ? $_SESSION['post_form']['numtel'] : '' ?>" />
</p>
<p>
<label for="codepostal"> Votre code postal :</label>
<input name="codepostal" id="codepostal" type="text" size="5" minlength= "5" maxlength="5" value="<?php echo (isset($_SESSION['post_form']['codepostal'])) ? $_SESSION['post_form']['codepostal'] : '' ?>" />
</p>
<p>
<label for="ville"> Ville :</label>
<input type="text" id="ville" name="ville" value="<?php echo (isset($_SESSION['post_form']['ville'])) ? $_SESSION['post_form']['ville'] : '' ?>" />
</p>
<p style="margin-top:1.5em">
<input name = "envoyer" value = "Envoyer" type = "submit"/>
</p>
</div>
</form>
<div style="font-size:0.8em; font-weight:bold">
<?php
if(isset($_SESSION['post_form']['message']) && count($_SESSION['post_form']['message']) > 0)
{
foreach($_SESSION['post_form']['message'] as $value) echo '<p>- '.$value.'</p>';
}
?>
</div>
</div>
</body>
</html>
Les autres champs sont uniquement là pour faire un exemple de formulaire complet. De même les motifs dans les regex (preg_match) sont arbitraires et devront être adaptés à vos besoins avant d'être utilisés.
Le code est documenté au fil de l'eau, il est autonome et peut-être testé dans une page séparée en faisant un simple copié-collé
Dans cet exemple ce sont deux select qui sont affichés (contre boutons radio plus select dans le premier exemple). Le code avec les boutons radio est présent mais mis en commentaires.
