[Résolu] Validation formulaire avec checkbox

Question

lilouetfredo

10 Sep 2015 à 22:51

Bonjour à tous,

J'ai un petit soucis de formulaire tout bête ^^ :
j'ai créé un site web avec formulaire de contact.
Aucun soucis, le formulaire fonctionne bien avec validation ou non validation suivant si les champs obligatoires sont remplis ou non.
Bref,

mon soucis 1 :
j'ai ajouté des checkbox dans mon formulaire et je n'arrive pas a afficher leur contenu dans le mail (je m'envoi un test en remplissant mon formulaire, mais je n'obtiens que le contenu saisi dans le champ message dans le mail que je reçois et non les checkbox cochées)

soucis 2 :
toujours sur ces checkbox (décidément ^^): si par malheur un champ obligatoire n'est pas rempli, la validation du mail ne se fait pas, j'ai un message d'erreur sous le champs en question et je récupère toutes les données inscrite par la personne SAUF les checkbox qui perdent leur coche... Comment garder ces données svp?

Je n'arrive pas à trouver ce que je souhaite sur google.

En vous remerciant par avance.

_laurent

Modérateur

10 Sep 2015 à 23:42

Bonsoir,

Soucis 1 : Un bout de code pour nous montrer ce que tu récupères, en quel langage et comment tu l'envoies ne serait pas de trop. C'est assez semblable aux inputs text normalement (ça reste un input avec un name).

Soucis 2 : Comment persistes-tu tes input de text ? Là encore c'est assez semblable, une fois que le soucis n1 sera résolu, tu pourras faire un test sur les valeur pour ajouter ou non l'attribut checked à ta checkbox.

Smiley smile

lilouetfredo

11 Sep 2015 à 09:23

Voici les bouts de code pour que ce soir plus simple.
Je pense que ce n'est pas compliqué en effet, mais je trouve pas la solution ^^ :

mon php:

<?php
	if(!empty($_POST)){
		extract($_POST);
		$valid = true;
		if(empty($nom)){
			$valid=false;
			$erreurnom="Veuillez remplir votre nom";
		}

		if (!preg_match("#^0[1-9]([-. ]?[0-9]{2}){4}$#", $tel)){
			$valid=false;
			$erreurtel="Votre t&#233;l&#233;phone n'est pas valide";
    	}

		if(empty($tel)){
			$valid=false;
			$erreurtel="Veuillez saisir votre num&#233;ro de t&#233;l&#233;phone";
		}

		if (!preg_match("/^[a-z0-9\-_.]+@[a-z0-9\-_.]+\.[a-z]{2,3}$/i", $email)){
			$valid=false;
			$erreuremail="Votre email n'est pas valide";
		}
		if(empty($email)){
			$valid=false;
			$erreuremail="Vous n'avez pas saisi votre adresse email";
		}
		if(empty($message)){
			$valid=false;
			$erreurmessage="Veuillez saisir un message";
		}
		if($valid){
			$to="..@gmail.com";
			$sujet=$nom."Via lilou";
			$header= "From: ..@gmail.com \n";
			$header.="Reply-To: $email";
          	$message = stripcslashes($message);
          	$nom = stripcslashes($nom);
          	if (mail($to, $sujet, $message, $header)) {
              	$information='<span class="turquoise">Votre message a bien &#233;t&#233; envoy&#233; !</span>';
              	unset($nom);
              	unset($email);
              	unset($message);
              	unset($tel);
              	unset($ent);
          	}else{	
			$information='<span class="rouge">Votre message n\'a pas &#233;t&#233; envoy&#233; !</span>';
			}
		}
	}
?>

mon formulaire:

<form id="boxDevis"  method="post" action="devis-gratuit-creation-site-internet.php" role="form" class="formulaireDevis">
	<div class="form-group">
		<span><?php if (isset($information)) {echo $information;}?></span>
	</div>
	<div class="row">
		<div class="col-md-6">
			<div class="thumbnail">
				<div class="form-group">
					<label for="nom">Nom <span class="rouge">*</span></label>
					<input class="form-control" type="text" id="nom" name="nom" value="<?php if(isset($nom)) echo $nom;?>" placeholder="Indiquez votre nom"/>
					<span class="error_message"><?php if(isset($erreurnom)) echo $erreurnom;?></span>
				</div>
			</div>
		</div>
		<div class="col-md-6" >
			<div class="thumbnail">
				<div class="form-group">
					<label for="tel">Téléphone <span class="rouge">*</span></label>
					<input class="form-control" type="text" id="tel" name="tel" value="<?php if(isset($tel)) echo $tel;?>" placeholder="Indiquez votre numéro de téléphone"/>
					<span class="error_message"><?php if(isset($erreurtel)) echo $erreurtel;?></span>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-6">
			<div class="thumbnail">
				<div class="form-group">
					<label for="ent">Entreprise / Société</label>
					<input type="text" class="form-control" id="ent" name="ent" value="<?php if(isset($ent)) echo $ent;?>" placeholder="Indiquez votre Société"/>
				</div>
			</div>
		</div>
		<div class="col-md-6" >
			<div class="thumbnail">
				<div class="form-group">
					<label for="email">Email <span class="rouge">*</span></label>
					<input type="email" class="form-control" name="email" id="email" value="<?php if(isset($email)) echo $email;?>" placeholder="Indiquez votre adresse mail"/>
					<span class="error_message"><?php if(isset($erreuremail)) echo $erreuremail;?></span>
				</div>
			</div>
		</div>
	</div>

	<hr></hr>

	<div class="row">
		<div class="col-md-6">
			<div class="thumbnail">
				<div class="form-group">
					<label for="souhait">Vous souhaitez ...</label>
						<div class="radio">
							<label>
								<input type="checkbox" value="<?php if(isset($btnsouhait1)) echo 'checked="checked"';?>" name="btsouhait1" id="btnsouhait1" onClick="javascript:checkBoxFunction('btsouhait1')">Texte
							</label><br/>
								<div id="btsouhait1" style="display:none;" class="champsHide">						
								<label>
									<input type="checkbox" name="btsite1" id="btsite1" value="<?php if(isset($btsite1)) echo 'checked="checked"';?>" > Solution1
								</label><br/>
								<label>
									<input type="checkbox" name="btsite2" id="btsite2" value="<?php if(isset($btsite2)) echo 'checked="checked"';?>"> Solution2
								</label><br/>
								<label>
									<input type="checkbox" name="btsite3" id="btsite3" value="<?php if(isset($btsite3)) echo 'checked="checked"';?>"> Solution3
								</label><br/>
								<label>
								<input type="checkbox" name="btsite4" id="btsite4" value="<?php if(isset($btsite4)) echo 'checked="checked"';?>"> Solution4
								</label><br/>
								<label>Nombre de pages?
									<input type="text" name="btsite5" id="btsite5" value="">
								</label><br/>	
							</div>

							<label>
								<input type="checkbox" name="btsouhait2" id="btnsouhait2" value="" onClick="javascript:checkBoxFunction('btsouhait2')">visuel
							</label><br/>
								<div id="btsouhait2" style="display:none;" class="champsHide">
									<label>
										<input type="checkbox" name="btvisuel1" value="" > Visuel1
									</label><br/>
									<label>
										<input type="checkbox" name="btvisuel2"  value=""> Visuel2
									</label><br/>
									<label>
										<input type="checkbox" name="btvisuel3"  value=""> Visuel3
									</label><br/>	
								</div>

								<label>
									<input type="checkbox" name="btsouhait3" id="btnsouhait3" value="" onClick="javascript:checkBoxFunction('btsouhait3')">formation
								</label><br/>
								<div id="btsouhait3" style="display:none;" class="champsHide">
									<label>
										<input type="checkbox" name="btformation1" value="" > formation1
									</label><br/>
									<label>
										<input type="checkbox" name="btformation2"  value=""> Formation2
									</label><br/>
									<label>
										<input type="checkbox" name="btformation3"  value=""> Formation3
									</label><br/>
									<label>
										<input type="checkbox" name="btformation4"  value=""> Formation4
									</label><br/>
									<label>
										<input type="checkbox" name="btformation5"  value=""> Formation5
									</label><br/>	
									<label>
										<input type="checkbox" name="btformation6"  value="">Formation6
									</label><br/>
								</div>
													
								<label>
									<input type="checkbox" name="btsouhait4" id="btnsouhait4" value="" onClick="javascript:checkBoxFunction('btsouhait4')">Autres...
								</label><br/>
								<div class="form-group" id="btsouhait4" style="display:none;" class="champsHide">
									<input type="text" class="form-control" name="precision" id="precision" placeholder="Précisez votre demande"/>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<hr></hr>

			<div class="row">
				<div class="col-md-12">
					<div class="thumbnail">
						<div class="form-group">
							<label for="message">Description <span class="rouge">*</span></label>
							<textarea class="form-control" id="message" name="message" placeholder="Indiquez votre message" rows="4"><?php if(isset($message)) echo $message;?></textarea>
							<span class="error_message"><?php if(isset($erreurmessage)) echo $erreurmessage;?></span>
						</div>
					</div>
				</div>
			</div>

			<p>(<span class="rouge">*</span>) Les mentions sont obligatoires</p>

			<div class="row">
				<div class="col-md-12">
					<div class="thumbnail">
						<div class="bouton"><button type="submit" class="btn bt-submit">Envoyer</button></div>
					</div>
				</div>
			</div>
		</form>

voila, j'espère que cela vous aidera Smiley smile

Raphi

11 Sep 2015 à 09:34

Bonjour,

<input type="checkbox" value="<?php if(isset($btnsouhait1)) echo 'checked="checked"';?>" name="btsouhait1" id="btnsouhait1" onClick="javascript:checkBoxFunction('btsouhait1')">

"checked" est un attribut au même titre que value. Donc tu ne dois pas mettre ta condition dans value. Dans value tu dois renseigner une valeur que tu veux recevoir ou non (si c'est coché ou non) une fois le formulaire soumis.
Voila ce que ça donnerai (à toi de changer la valeur bien sûr Smiley langue

) :

<input type="checkbox" value="Vive les poneys !" name="btsouhait1" id="btnsouhait1" onClick="javascript:checkBoxFunction('btsouhait1')" <?php if(isset($btnsouhait1)) echo 'checked="checked"';?>>

lilouetfredo

11 Sep 2015 à 09:51

et il n'y a rien dans le php pour récupérer les checkbox coché ou non? tout se fait en html?

et si un champ obligatoire n'est pas renseigné, je garde bien les valeurs rentré dans les champs texte mais pas les case cochées des checkbox. il y a t'il une possibilité de garder les case cochées si jamais un champs obligatoire n'est pas renseigné?

_laurent

Modérateur

11 Sep 2015 à 10:04

Salut,

lilouetfredo a écrit :
et il n'y a rien dans le php pour récupérer les checkbox coché ou non? tout se fait en html?

De la même facon que tu récupère $tel qui correspond au <input name="tel"> tu vas pouvoir récupérer les checkbox selon leur name (btsite1, btsite2, etc..).
Si la case et cochée, la variable btsiteX sera remplie avec ce que tu as mis dans value. Dans une input text, le value c'est ce que l'utilisateur tape au clavier mais dans un checkbox c'est toi qui doit fixer la value pour récupérer ce que tu veux quand la case est cochée :

<input type="checkbox" name="btsite1" value="majeur" > J'ai plus de 18 ans

Icii si la case est coché tu vas récupéré btsite1 avec dedans le string "majeur".
Dans ton code actuel les value sont vide (donc il te retournera des variables vides mais en plus tu ne les récupère pas comme les autres champs.

lilouetfredo a écrit :
et si un champ obligatoire n'est pas renseigné, je garde bien les valeurs rentré dans les champs texte mais pas les case cochées des checkbox. il y a t'il une possibilité de garder les case cochées si jamais un champs obligatoire n'est pas renseigné?

Oui oui c'est ce que te disais Raphi. Au meme titre que tu utilises

value="<?php if(isset($ent)) echo $ent;?>"

dans tes input text pour les reremplir avec ce qu'il y a, il va s'agor de regarder si ta variable est remplie (ca voudra dire que la case était cochée) et si oui de cocher la case (mais il n'y a aucun interet a remettre la value comme dans un input vu qu'elle ne bouge pas) :

<input type="checkbox" name="btsite1" value="majeur" <?php if(isset($btsite1)) echo 'checked="checked"';?>> J'ai plus de 18 ans

Modifié par _laurent (11 Sep 2015 - 10:06)

lilouetfredo

11 Sep 2015 à 10:38

Ok donc dans "Value" je met par exemple "case cochee" et si cette case est coché, je retrouverai "case cochee" dans mon mail. et si jamais elle n'est pas cochée, je n'aurai rien. C'est bien cela?

Je vais tester vos codes et l'adapter à mon formulaire Smiley smile

Je reviens vers vous rapidement.

_laurent

Modérateur

11 Sep 2015 à 10:50

lilouetfredo a écrit :
Ok donc dans "Value" je met par exemple "case cochee" et si cette case est coché, je retrouverai "case cochee" dans mon mail. et si jamais elle n'est pas cochée, je n'aurai rien. C'est bien cela?

A condition que tu l'écrive dans le mail avant de l'envoyer oui Smiley lol

lilouetfredo

11 Sep 2015 à 11:55

Bon je dois pas trop saisir ce critère ^^ :
j'arrive bien a garder les case cochée quand un champ obligatoire n'a pas été saisie.
En revanche, les cases cochées ne s'affichent pas dans mon mail.
de même que je n'affiche pas ce qui est entré dans le champ tel, ent...

Dans quelle partie on traite cela?

dans celle-ci :

if($valid){
			$to="laetitia.ledoux@gmail.com";
			$sujet=$nom."Via Rhésus W+";
			$header= "From: laetitia.ledoux@gmail.com \n";
			$header.="Reply-To: $email";
          	$message = stripcslashes($message);
          	$nom = stripcslashes($nom);
          	if (mail($to, $sujet, $message, $header)) {
              	$information='<span class="turquoise">Votre message a bien &#233;t&#233; envoy&#233; !</span>';
              	unset($nom);
              	unset($email);
              	unset($message);
              	unset($tel);
              	unset($ent);
              	unset($btsouhait1);
              	unset($btsouhait2);
              	unset($btsouhait3);

          	}else{	
			$information='<span class="rouge">Votre message n\'a pas &#233;t&#233; envoy&#233; !</span>';
			}
		}

c'est pas évident le php Smiley cligne

Modifié par lilouetfredo (11 Sep 2015 - 11:56)

_laurent

Modérateur

11 Sep 2015 à 12:05

Normal, tu envois directement ton mail avec comme texte la variable $message :

mail($to, $sujet, $message, $header)

En fait tu ne colle que cette variable dans ton texte... il faudrait idéalement que tu crée une variable qui va contenir le corps de ton mail :


$corpsdumail = $nom . " vous a écrit le message : " . $message . " et son numéro de téléphone est le " . $tel;

mail($to, $sujet, $corpsdumail, $header)

Duc oup tu peux coller tout ce que tu veux dedans, dont les variables $btsouhait1 qui représentes tes checkbox.
Ca te permettra même de mettre en forme ton email avec du HTML etc...
Modifié par _laurent (11 Sep 2015 - 12:06)

lilouetfredo

11 Sep 2015 à 12:27

Ah yes !!

Il me semble avoir déjà fait ca dans un vieux site il y a quelques années !

Je vais tester, je reviens vers vous Smiley smile

.

lilouetfredo

11 Sep 2015 à 15:31

Alors c'est presque parfait Smiley smile

.
Je retrouve bien toutes les infos, j'ai mis en forme avec des /n.
En revanche un soucis se pose, et a mon avis c'est juste une condition à faire :

je rempli mes champs + checkbox, mais j'oubli un champ obligatoire.
Je conserve bien toutes les données.
Or, mes checkbox sont particulieres, en cliquant sur les checkbox de 1er niveau (celles qui sont affichés dans le formulaire) elles laissent apparaitre les checkbox de 2eme niveau (qui sont cachés).
exemple :
checkbox1
checkbox2
checkbox 3
En cliquant par exemple sur checkbox1, elle laisse apparaitrent les checkbox de 2eme niveau :
checkbox1
checkbox1.1
ckeckbox1.2
checkbox1.3
checkbox2
checkbox3

le soucis qui se pose est qu'en oubliant de remplir un champ obligatoire, je conserve les données mais mes checkbox de premier niveau se referment, et du coup il faut recliquer dessus pour qu'elles s'ouvrent par contre forcément en recliquant dessus elles se décochent....

C'est un peu compliqué a expliquer, j'espère que vous aller comprendre ... Smiley smile

_laurent

Modérateur

11 Sep 2015 à 15:39

Je crois que je comprend.
L'ouverture du second niveau est fait en JavaScript au click sur une checkbox du premier niveau ?
Il "suffirait" alors d'avoir également une initialisation de l'état des checkbox en plus de la fonction au click.

lilouetfredo

11 Sep 2015 à 15:45

en js :

<script type="text/javascript">
			function checkBoxFunction (checkBoxID) {
				var baliseChoix = document.getElementById(checkBoxID);
				if (baliseChoix.style.display == "none") {
					baliseChoix.style.display = "block"; 
				}else{ 	
					baliseChoix.style.display = "none";
				}
			}
		</script>

et en html:

<div id="btsouhait3" style="display:none;" class="champsHide"> .... toutes les checkbox de 2nd niveau.

id="btsouhait3" qui rappelle la case a coché de premier niveau

mais je connais pas grand chose en js :-s

_laurent

Modérateur

11 Sep 2015 à 15:55

ah oui j'avais loupé le

onClick="javascript:checkBoxFunction('btsouhait2')"

dans ton code du début.

Bon déjà ce n'est pas la maniere la plus propre de faire du Js. Mais ce n'est pas le sujet du post donc je te laisse juste le lien des eventListener (pour éviter les onClick dans le HTML) et l'API ClassList (pour changer les classes des balise et éviter les style en inline dans le HTML) pour piquer ta curiosité :
http://www.w3schools.com/js/js_htmldom_eventlistener.asp
http://www.alsacreations.com/article/lire/1498-lapi-classlist.html

En ce qui concerne ton code, checkBoxFunction pour le moment n'est appellée que par les onClick.
Il te suffit de l’exécuter une première fois au chargement de la page.

[EDIT]
En l'état par contre il faut que tu appelles la fonction pour chaque checkbox... un truc du genre :

<script type="text/javascript">
	function checkBoxFunction (checkBoxID) { //fonction qui peut être appelée par le onClick par ex
		var baliseChoix = document.getElementById(checkBoxID);
		if (baliseChoix.style.display == "none") {
			baliseChoix.style.display = "block"; 
		}else{ 	
			baliseChoix.style.display = "none";
		}
	}

        checkBoxFunction(btnsouhait1); // execution de la fonction sans attendre le click pour initialiser
        checkBoxFunction(btnsouhait2);
        checkBoxFunction(btnsouhait3);
        //etc...
</script>

Il faudra du coup te rapprocher également de la notion de DOMready histoire d’être sur d’exécuter tes fonctions d’initialisation seulement une fois le DOM chargé (car si les fonctions s’exécutent alors que les checkbox ne sont pas encore créées ca ne sert pas a grande chose...). Mais ça pourra faire l'objet d'une autre post.
[/EDIT]
Modifié par _laurent (11 Sep 2015 - 16:05)

lilouetfredo

11 Sep 2015 à 21:34

Je ne comprends pas bien ton code.

Ce n'est pas grave, je vais supprimer ce cache de checkbox et les rendre visible.

Merci en tout cas pour ton aide précieuse Smiley smile

Merci également aux autres personnes.
Modifié par lilouetfredo (12 Sep 2015 - 11:19)

lilouetfredo

12 Sep 2015 à 11:20

sujet résolu

Sujet clos

Questions générales et questions de débutants

[Résolu] Validation formulaire avec checkbox