Forum d'entraide PHPFrance

Bonjour,

Je voudrais valider le formulaire avant envoi.

Dans le formulaire j'ai plusieurs checkbox par catégorie et je voudrais que pour chaque catégorie, au moins une des checkbox est coché.

Pouvez-vous m'aider ?

Merci

le fichier testcheck.js

Code : Tout sélectionner

function testcheck()
{
	$test=false;
	for ($i=1; $i<=3; $i++)
	{
	 $choix=document.getElementById('checkbox'+$i).checked;
	 if ($choix==true)
	 {
		$test=true;
	 }
  }
	if ($test==true)
	{
   document.getElementById('form1').submit();
  }else{
   alert("Vous devez faire au moins un choix :");
  }
}

le formulaire :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="generator" content="UltraEdit" />
    <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
    <title>test</title>
  </head>
  <body>
  	<script type="text/javascript" src="testcheck.js"></script> 
    <form  id="form1" method="post" action="action.php">
  <p>
     <input type="checkbox" name="checkbox1" id="checkbox1" value="checkbox" />
     <input type="checkbox" name="checkbox2" id="checkbox2" value="checkbox" />
     <input type="checkbox" name="checkbox3" id="checkbox3" value="checkbox" />
  </p>
    <p><input type="button" name="Submit" value="Envoyer" onclick="testcheck()" /></p>
    </form>
</body>
</html>

merci beaucoup, je vais tester ça

Hello Gentoo !

Je viens de tester ton code, ça marche nickel. Mais j'ai un soucis quand j'ai plusieurs catégories de checkbox.

Par exemple si j'ai :

Code : Tout sélectionner

  <p> 
  <input type="checkbox" name="niveau1" value="Loisir" id="niveau1"><label for=niveau1>Loisir</label><br />
  <input type="checkbox" name="niveau2" value="Départemental" id="niveau2"><label for=niveau2>Départemental</label><br />
  <input type="checkbox" name="niveau3" value="Régional" id="niveau3"><label for=niveau3>Régional</label><br />
  <input type="checkbox" name="niveau4" value="National" id="niveau4"><label for=niveau4>National</label>
  </p> 
   <p> 
  <input type="checkbox" name="categorie1" value="Loisir" id="categorie1"><label for=categorie1>6 * 6</label><br />
  <input type="checkbox" name="categorie2" value="Départemental" id="categorie2"><label for=categorie2>4 * 4</label><br />
  <input type="checkbox" name="categorie" value="Régional" id="categorie3"><label for=categorie3>3 * 3</label><br />
  <input type="checkbox" name="categorie4" value="National" id="categorie4"><label for=categorie4>2 * 2</label>

J'ai tenté de dupliquer le javascript pour prendre en compte les autres checkbox mais ça ne marche plus.

Si je clique sur niveau1 par exemple et que je valide, il me met bien une alert comme quoi il faut une catégorie, mais quand je fais ok, il envoie quand même la page au lieu de rester sur le formulaire...

Merci de ton aide

si j'ai bien compris, tu voudrais un truc du genre :

Code : Tout sélectionner

Catergorie 1
 checkbox1
 checkbox2
 checkbox1

Catergorie 2
 checkbox1
 checkbox2
 checkbox1

Catergorie 3
 checkbox1
 checkbox2
 checkbox1

Et tu voudrais qu’au moins un des chaque soit coché ? c'est ça ?

Oui c'est exactement ça que je veux. Il faut qu'au moins un champs de chaque catégorie soit coché.
Voici 2 catégories, j'en ai une troisième mais si ça marche avec 2, ça devrait aller avec trois

Code : Tout sélectionner

Niveau :
<input type="checkbox" name="niveau1" value="Loisir" id="loisir">Loisir
<input type="checkbox" name="niveau2" value="Départemental" id="dep">Départemental
<input type="checkbox" name="niveau3" value="Régional" id="reg">Régional
<input type="checkbox" name="niveau4" value="National" id="nat">National

Type :
<input type="checkbox" name="type1" value="6 * 6" id="66">6 * 6
<input type="checkbox" name="type2" value="4 * 4" id="44">4 * 4
<input type="checkbox" name="type3" value="3 * 3" id="33">3 * 3
<input type="checkbox" name="type4" value="2 * 2" id="22">2 * 2

Sachant que le nombre de checkbox de chaque catégorie peut différer.

le fichier choix.js

function testcheck(nbrcat,nbrcbox)
{
	testnbrcat=0;
	testok=false;
	for (i=1; i<=nbrcat; i++)
	{
		numchk=String(nbrcbox).charAt(i-1);
		for (a=1; a<=numchk; a++)
	  {
	  	if (document.getElementById('cat'+i+'_cbox'+a).checked==true) testok=true;
		}
		if (testok==true) { testnbrcat=testnbrcat+1; testok=false; }
	}
	if (testnbrcat==nbrcat)
	{
   document.getElementById('form1').submit();
  }else{
   alert("Vous devez faire au moins un choix dans chaque cat&eacute;gorie");
  }
}

le formulaire

Code : Tout sélectionner

<script type="text/javascript" src="choix.js"></script> 
<form  id="form1" method="post" action="action.php">
  <p>Catégorie 1
     <input type="checkbox" name="checkbox1" id="cat1_cbox1" value="checkbox" />
     <input type="checkbox" name="checkbox2" id="cat1_cbox2" value="checkbox" />
     <input type="checkbox" name="checkbox3" id="cat1_cbox3" value="checkbox" />
  </p>
  <p>Catégorie 2
     <input type="checkbox" name="checkbox4" id="cat2_cbox1" value="checkbox" />
     <input type="checkbox" name="checkbox5" id="cat2_cbox2" value="checkbox" />
     <input type="checkbox" name="checkbox6" id="cat2_cbox3" value="checkbox" />
  </p>
  <p>Catégorie 3
     <input type="checkbox" name="checkbox7" id="cat3_cbox1" value="checkbox" />
     <input type="checkbox" name="checkbox8" id="cat3_cbox2" value="checkbox" />
     <input type="checkbox" name="checkbox9" id="cat3_cbox3" value="checkbox" />
     <input type="checkbox" name="checkbox9" id="cat3_cbox4" value="checkbox" />
  </p>
  <p><input type="button" name="Submit" value="Envoyer" onclick="testcheck('3','334')" /></p>
</form>

il faut respecter la syntaxe de l'ID cat(num)_cbox(num) exemple :

le deuxième checkbox de la troisième catégorie est cat3_cbox2

ensuite l'appelle à la fonction ce fait comme ceci :

Le premier élément c'est le nombre de catégories et le deuxième c'est le nombre de checkbox dans chaque catégorie.

Exemple tu as 3 catégories : (categorie 1, 3 checkbox) (categorie 2, 2 checkbox) (categorie 3, 4 checkbox)

l'appelle ce feras comme ceci : testcheck('nbr_categorie','nbrchkboxcat1|nbrchkboxcat1|nbrchkboxcat1')=testcheck('3','324').

Si tu ne comprends pas tout, demande plus d'explications.

Oki merci beaucoup, je testerais ça chez moi et je te tiens au courant.

Merci pour ton aide

Zut je viens de penser à quelque chose...dans mon formulaire j'ai pas mal de tests sur d'autre champs autre que ces checkbox.

Je fais appel au javascript dans mon form avec :

Code : Tout sélectionner

<script language="JavaScript">
function verify(theForm)
{
if (theForm.elements['dpt'].value=="0")
 	{
  	alert("Merci de sélectionner un département.");
  	theForm.elements['dpt'].focus();
  	return false;
 	}
}
// ici d'autres tests dela même forme
</script>

<form action="xxx.php" method=post name="xxx" onsubmit="return verify(this);">

et un bouton submit et non pas button :

Code : Tout sélectionner

<input type="submit" value="Envoyer">

. Je ne sais pas si le button est obligé.

Comment puis intégrer ton code avec celui que j'ai déjà sachant que ton appel est testcheck('3','334') ? Je suis un peu perdu...

il y a plusieurs façons de faire tout dépend de tes scripts :

un exemple tu laisse ton button submit comme il est

et dans ton script verify(theForm) tu rajoute un apelle a mon script legerement modifieé :

Code : Tout sélectionner

function verify(theForm)
{
testok=testcheck('3','334');
if (theForm.elements['dpt'].value=="0")
    {
     alert("Merci de sélectionner un département.");
     theForm.elements['dpt'].focus();
     return false;
    }else{
if (testok==false) 
{
alert("Vous devez faire au moins un choix dans chaque cat&eacute;gorie"); 
return false;
}
}
}

script modifié :

Code : Tout sélectionner

function testcheck(nbrcat,nbrcbox)
{
	testnbrcat=0;
	testok=false;
	for (i=1; i<=nbrcat; i++)
	{
		numchk=String(nbrcbox).charAt(i-1);
		for (a=1; a<=numchk; a++)
	  {
	  	if (document.getElementById('cat'+i+'_cbox'+a).checked==true) testok=true;
		}
		if (testok==true) { testnbrcat=testnbrcat+1; testok=false; }
	}
	if (testnbrcat==nbrcat)
	{
   return true;
  }else{
     return false;
  }
}

Ou tu peux faire le contraire ou dans un autre script, tout dépend ce que tu dois vérifier en premier.

edit : script

D'accord, cette fois je pourrais commencer à le tester chez moi

Encore merci

Je te tiendrais au courant.

Voili, j'ai testé ça marche nickel sauf sur une tite chose...

Il s'agit de la vérification du mail, dès que je le rajoute il bug.

Pour la validation du mail j'utilise :

Code : Tout sélectionner

if (theForm.elements['mail'].value=="")
 		{
  		alert("Merci de saisir votre mail.");
  		theForm.elements['mail'].focus();
  		return false;
 		}
		
	if (theForm.elements['mail'].value!="")
	 	{
		 if ((theForm.elements['mail'].value.indexOf('@')==-1) || (theForm.elements['mail'].value.indexOf('.')==-1))  
			{
			alert("L\'adresse e-mail saisie est invalide.");
	  		theForm.elements['mail'].focus();
	  		return false;
			}
		}
	return true;

Si j'inclus ce code dans le code que tu m'as donné, ça donne :

Code : Tout sélectionner

<script language="JavaScript">
function verify(theForm) 
{ 
	testok=testcheck('2','44'); 
	if (theForm.elements['cp'].value=="") 
	{ 
		alert("cp à indiquer."); 
		theForm.elements['cp'].focus(); 
		return false; 
	}
	else if (theForm.elements['lieu'].value=="") 
	{ 
		alert("lieu à indiquer."); 
		theForm.elements['lieu'].focus(); 
		return false; 
	}
	else if (theForm.elements['mail'].value=="")
 		{
  		alert("Merci de saisir votre mail.");
  		theForm.elements['mail'].focus();
  		return false;
 		}
	else if (theForm.elements['mail'].value!="")
	 	{
		 if ((theForm.elements['mail'].value.indexOf('@')==-1) || (theForm.elements['mail'].value.indexOf('.')==-1))  
			{
			alert("L\'adresse e-mail saisie est invalide.");
	  		theForm.elements['mail'].focus();
	  		return false;
			}
		}
	return true;

	else
	{ 
		if (testok==false) 
		{
			alert("Vous devez faire au moins un choix dans chaque catégorie"); 
			return false; 
		} 
	} 
}

function testcheck(nbrcat,nbrcbox) 
{ 
	testnbrcat=0; 
	testok=false; 
	for (i=1; i<=nbrcat; i++) 
	{ 
		numchk=String(nbrcbox).charAt(i-1); 
		for (a=1; a<=numchk; a++) 
		{ 
			if (document.getElementById('cat'+i+'_cbox'+a).checked==true) testok=true; 
		} 
			if (testok==true) { testnbrcat=testnbrcat+1; testok=false; } 
	} 
	if (testnbrcat==nbrcat) 
	{ 
		return true; 
	}
	else
	{ 
		return false; 
	} 
}
</script>

Et le formulaire complet de test :

Code : Tout sélectionner

<form  id="form1" method="post" action="action.php" onsubmit="return verify(this);"> 
	<p>cp : <input class="texte" type="text" name="cp" size=18></p>
	<p>lieu : <input class="texte" type="text" name="lieu" size=18></p>
	<p>mail : <input class="texte" type="text" name="mail" size=18></p>
  <p> 
  <input type="checkbox" name="niveau1" value="Loisir" id="cat1_cbox1"><label for=niveau1>Loisir</label><br />
  <input type="checkbox" name="niveau2" value="Départemental" id="cat1_cbox2"><label for=niveau2>Départemental</label><br />
  <input type="checkbox" name="niveau3" value="Régional" id="cat1_cbox3"><label for=niveau3>Régional</label><br />
  <input type="checkbox" name="niveau4" value="National" id="cat1_cbox4"><label for=niveau4>National</label>
  </p> 
   <p> 
  <input type="checkbox" name="categorie1" value="66" id="cat2_cbox1"><label for=categorie1>6 * 6</label><br />
  <input type="checkbox" name="categorie2" value="44" id="cat2_cbox2"><label for=categorie2>4 * 4</label><br />
  <input type="checkbox" name="categorie3" value="33" id="cat2_cbox3"><label for=categorie3>3 * 3</label><br />
  <input type="checkbox" name="categorie4" value="22" id="cat2_cbox4"><label for=categorie4>2 * 2</label>
  </p> 
    <p><input type="submit" value="Envoyer"></p> 
    </form>

Et là ça plante. Sais-tu pourquoi ? Après ce problème je pense que ça sera parfait

Merci !!!

tout simplement comme ceci :

function verify(theForm)
{
    testok=testcheck('2','44');
    if (theForm.elements['cp'].value=="")
    {
        alert("cp à indiquer.");
        theForm.elements['cp'].focus();
        return false;
    }
    if (theForm.elements['lieu'].value=="")
    {
        alert("lieu à indiquer.");
        theForm.elements['lieu'].focus();
        return false;
    }
    if (theForm.elements['mail'].value=="")
    {
        alert("Merci de saisir votre mail.");
        theForm.elements['mail'].focus();
        return false;
    }
    if (theForm.elements['mail'].value!="")
    {
        if ((theForm.elements['mail'].value.indexOf('@')==-1) || (theForm.elements['mail'].value.indexOf('.')==-1)) 
        {
            alert("L\'adresse e-mail saisie est invalide.");
            theForm.elements['mail'].focus();
            return false;
        }
    } 
    if (testok==false)
    {
        alert("Vous devez faire au moins un choix dans chaque catégorie");
        return false;
    }
return true; 
}

Ah bé voui hihi ça marche nickel chrome !!

Merci pour ton aide précieuse

A bientôt !!!

Forum d'entraide PHPFrance

Tester qu'au moins un checkbox est coché

Tester qu'au moins un checkbox est coché