Checkbox avant validation formulaire PHP

Résolu/Fermé
saadainese Messages postés 45 Date d'inscription vendredi 6 mars 2009 Statut Membre Dernière intervention 11 janvier 2013 - 9 mars 2009 à 16:49
mod77 Messages postés 1273 Date d'inscription vendredi 10 juillet 2009 Statut Membre Dernière intervention 14 janvier 2024 - 15 mars 2010 à 08:38
Bonjour,

j'ai un formulaire PHP ou je voudrais que l'utisateur coche une case avant de valider son formulaire.
quand je la mets checked, c pas evident parceque l'utilisateur doit la cocher lui meme,
sinon je recois une erreur comme quoi la variable n'est pas definies, je voudrais que la validation se fasse si et seulement si l'utilisateur coche la case, et sinon lui afficher sur la meme page du formulaire une indication pour la cocher, et merci

3 réponses

dolmenhir Messages postés 246 Date d'inscription mercredi 4 mars 2009 Statut Membre Dernière intervention 13 mars 2009 25
9 mars 2009 à 19:08
Tiens, j'ai fais exactement la même chose sur ce site :
http://www.citevoile-tabarly.com/contact.html

Impossible d'envoyer le formulaire tant que la case à cocher de la clause de confidentialité n'a pas été cochée
3
saadainese Messages postés 45 Date d'inscription vendredi 6 mars 2009 Statut Membre Dernière intervention 11 janvier 2013 2
12 mars 2009 à 16:57
Bonjour,
Merci Dolmenhir, j'ai vu le lien, et je crois que c'est vraiment une bonne idée que l'utilisateur ne puisse valider que s'il coche la case, si tu pouvais donner plus d'explication sur la methode que tu as utilisé, j'en serait vraiment content,
0
dolmenhir Messages postés 246 Date d'inscription mercredi 4 mars 2009 Statut Membre Dernière intervention 13 mars 2009 25 > saadainese Messages postés 45 Date d'inscription vendredi 6 mars 2009 Statut Membre Dernière intervention 11 janvier 2013
12 mars 2009 à 20:27
Bonsoir,
La recette est très simple.
Je ne parlerai pas de la formule de vérification du formulaire, voisine de cette que décris Alain_42
Elle n'est pas obligatoire... mais cela rend bien service quand même de vérifier s'il les champ sont bien saisis, voir même si leur type contenu correspond à ce que l'on attend (lettre, chiffre, email...)

Bon, ma procédure d'activation/désactivation du bouton submit (et donc de la fonction submit) est la suivante :(en la relisant je me suis rendu compte qu'elle avait une grosse lacune. Je l'ai corrigée et un peu dépoussiérée.)

1. je crée une fonction appelée ici Agree
function Agree() {
	if(document.contact.agree.checked == true) {
		document.contact.valid.disabled = false;
	} else {
		document.contact.valid.disabled = true;
	} 
}

Elle vérifie une condition :
le statut "checked" de l'élément portant le nom "agree' du formulaire "contact" du document en cours (document.contact.agree.checked) est-il vrai (true) ?
Si oui, le statut "disabled" de l'élément "valid" du formulaire "valid" du document en cours est mis à false (faux), donc activé: document.contact.valid.disabled = false
Bref, si la case est cochée j'active le bouton

Sinon (else)

Cela signifiq ue la case n'est pas cochée (pas true) et donc le statut "disabled" de l'élément "valid" du formulaire "valid" du document en cours est mis à true (vrai), donc désactivé: document.contact.valid.disabled = true
bref, si la case n'est pas cochée le bouton est désactivé.

J'appelle cette procédure quand on clique sur la case, donc je place dans l'objet un appel à cette procédure :
onClick="Agree()"

Mais !
J'ai mis un bouton Annuler, sensé lancer un "reset() et donc remettre à zéro ou à leur valeur d'origine (celle indiqué par l'attribut value de l'objet) les éléments du formulaire .
Cela veut dire qu'il faut là aussi, tester la valeur de la case à cocher : onClick="Agree().
Donc, je remet à zéro et je teste la valeur de la case à cocher.
Certes, je sais, que la case sera remise à son état initial donc décochée (mon formulaire s'ouvre ainsi.
Mais si je ne fais pas cette vérification, le bouton d'envoi sera activé... Pourquoi ?
parce que en cochant la case, je l'active, et en cliquant sur Annuler je remets les champs à "zéro"...
Mais l'état désactivé du bouton n'est pas une valeur, mais un statut... il ne sera donc pas impacté.

Donc, pour résumer, si je ne mets pas onClick="Agree() dans le bouton Annuler, il suffit de cocher la case puis de faire Annuler pour pouvoir envoyer le formulaire.

J'espère que reste clair dans mes explications, mais par l'exemple, les choses sont vite évidentes.

Dernière chose, je mets pas (voire jamais) de bouton submit, ni reset.
J'utilise des objets de type "button" dans lesquels je place l'appel de la procédure concernée :on reset() et onSubmit()
Pourquoi ?
Parce que dans un formulaire disposant d'un vrai bouton submit, une simple pression de la touche "Enter" du clavier, peut suffire à envoyer le message... et je n'y tiens pas.
Par ailleurs, pour embêter certains robots, la procédure submit() requiert une action coté utilisateur.

Voilà, en espérant t'avoir éclairé.

Dol.
0
mod77 Messages postés 1273 Date d'inscription vendredi 10 juillet 2009 Statut Membre Dernière intervention 14 janvier 2024 53 > dolmenhir Messages postés 246 Date d'inscription mercredi 4 mars 2009 Statut Membre Dernière intervention 13 mars 2009
15 mars 2010 à 08:38
Bonjour Dolmenhir,

Au cours de ma recherche sur le site je viens de lire votre proposition qui m'intéresse aussi mais sur Access.
Car je cherche aussi comment je peux impliquer "le cochage" d'une case à cocher lors d'une validation. Pour éviter de poser la question à l'utilisateur. Mais même en posant la question ça m'intéresse!
Seriez-vous adapter votre code à Access, SVP ?

Merci
0
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
9 mars 2009 à 19:02
pour ça tu peux utiliser du javascript

tu mets au début de ta page:

<script type="text/javascript">
function verif_case(id_case){
 var obj=document.getElementById(id_case);
if(obj.checked!=true){
  alert("Vous devez cocher la case !!");
  return false;
}
return  true
}

</script>

et dans ton formulaire:

<form name="...." method="...." action="..." onSubmit="return verif_case('case1');">
<input type="checkbox" name="...." id="case1" value="...">


</form>


ainsi si la case n'est pas cochéee le formlaire ne partira pas et tu aura un message d'alerte
0
saadainese Messages postés 45 Date d'inscription vendredi 6 mars 2009 Statut Membre Dernière intervention 11 janvier 2013 2
12 mars 2009 à 16:56
Bonjour,
Merci Alain pour ta reponse meme si je n'ai pas pu la mettre en oeuvre, je valide un email avant et donc j'appelle ma fonction dans onsubmit de mon formulaire et je ne pe pa mettre les deux, sinon je l'ai essayé seule, mais avec cette id_case je sais pas par quoi la changer, en plus mon checkbox n'avait pas d'ID je viens de la lui ajouter, il y'a aussi l'attribut name, est ce que le name ne fait pas l'affaire ?
0
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
12 mars 2009 à 18:27
Bonsoir,

dans une fonction tu peux faire plusieurs tests

chaque test negatif te return false donc empèche le formulaire de partir
si tous les tets sont ok return true donc le form part

c'est le rôle de return devant verifs() dans l'appel de la fct

ensuite concernant name et id d'un input

tu peux mettre les deux et de plus avec le même nom, mais ce n'est pas obligatoire qu'ils soient identiques

en Javascript on peut atteindre un élément de la page html de deux façons:

- par l'id document.getElementById('nom_de_l'id')

- par le name document.nom_formulaire.name_d_champ

perso je préfère la première solution

exemple:

<script type="text/javascript">
function verifs(){
	////// un bloc pour tester un champ
	var obj1=document.getElementById('email');
	if(obj1.value==""){
	  alert("Vous devez saisir votre email!!");
	  return false;
	}
	/////
	//tu mets autant de blocs de test que de champs à tester
	//test validité email
		var exp=new RegExp("^[\\w\\-]+(\\.[\\w\\-]+)*@[\\w\\-]+(\\.[\\w\\-]+)*\\.[\\w\\-]{2,}$", "i");
		if(obj1.value !="" && !exp.test(obj1.value.value)){

	 var obj2=document.getElementById('case1');
	if(obj2.checked!=true){
	  alert("Vous devez cocher la case !!");
	  return false;
	}
return  true
}

</script>

et dans ton formulaire:

<form name="...." method="...." action="..." onSubmit="return verifs();">
<input type="text" name="email" id="email" value="">
<input type="checkbox" name="...." id="case1" value="...">


</form>
0