High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

Checkbox avant validation formulaire PHP

Dernière réponse le 12 mar 2009 à 20:27:42 saadainese, le 9 mar 2009 à 16:49:59 
 Signaler ce message aux modérateurs

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

Configuration: Windows XP
Internet Explorer 7.0

Posez votre question Répondre

1

Alain_42, le 9 mar 2009 à 19:02:00

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

   
Répondre à Alain_42

3

saadainese, le 12 mar 2009 à 16:56:59

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 ?

   
Répondre à saadainese

2

dolmenhir, le 9 mar 2009 à 19:08:17

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 C'est parce que la vitesse de la lumière est supérieure à ce­lle du son
que tant de gens paraissent brillant avant d'avoir l'air con­...

   
Répondre à dolmenhir

4

saadainese, le 12 mar 2009 à 16:57:36

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,

   
Répondre à saadainese

6

 dolmenhir, le 12 mar 2009 à 20:27:42

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. C'est parce que la vitesse de la lumière est supérieure à celle du son
que tant de gens paraissent brillant avant d'avoir l'air con...

   
Répondre à dolmenhir

5

Alain_42, le 12 mar 2009 à 18:27:58

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>

   
Répondre à Alain_42
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net