Discussion :

[HAbroc]

Bonjour,

J'ai un formulaire qui comporte 4 chekbox et je voudrais qu'une alerte s'affiche si aucun d'entre eux n'est coché.

J'ai procédé comme suit :

Dans le head, j'ai mis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function testcheck(){
   $test=false;
   for ($i=1; $i<=4; $i++){
    $choix=document.getElementById('checkbox'+$i).checked;
    if ($choix==true){
      $test=true;
    }
  }
   if ($test==true){
   document.getElementById('form1').submit();
  }else{
   alert("Vous devez cocher la bonne réponse");
  }
}

et dans le body , j'ai :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 <form action="<?php echo $editFormAction; ?>" method="POST" name="form1" id="form1">
 <input type="checkbox" name="v1" id="v1" value="Y"/>
 <input type="checkbox" name="v2" id="v2" value="Y"/>
 <input type="checkbox" name="v3" id="v3" value="Y"/>
 <input type="checkbox" name="v4" id="v4" value="Y"/>
 <input type="submit" name="submit" value="Soumettre une question" onclick="testcheck()"/>
 <input type="hidden" name="MM_update" value="form1"  />
 </form>

Je n'ai pas d'erreur mais le formulaire est envoyé sans message d'alerte si aucun checkbox n'est coché ...

[Bovino]

C'est tout à fait normal !

Ta fonction est appelée lors du clic sur le bouton submit et le clic sur le bouton submit provoque la soumission du formulaire, donc dans l'ordre :

• si définie, la fonction attachée à l'événement submit du formulaire ;
• l'envoi du formulaire au serveur.

Ce qui signifie que si la fonction JavaScript n'inhibe pas le comportement par défaut, la seconde étape sera toujours effectuée !

D'autre part, la vérification peut se faire en une seule ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function testcheck(){
    var cases = document.querySelector('input:checked');
    if(!cases){
        alert('Pas bon !');
        return false;
    }
    return true;
}

Bon, ça, c'est la version longue, la version en une ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function testcheck(){
    return document.querySelector('input:checked');
}

et pour le formulaire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<form onsubmit="return testcheck()">

[HAbroc]

J'ai suivi tes conseils mais toujours pas d'alerte ?

dans le head,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function testcheck(){
    return document.querySelector('input:checked');
}

et dans le body,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="submit" value="Soumettre une question" onsubmit="return testcheck()"/>

[Auteur]

bonjour,

l'événement n'est pas sur la balise input bouton, mais sur la balise form.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<form onsubmit="return testcheck()">

d'une manière générale, ne mets pas d'événement sur un input de type submit.

[HAbroc]

j'ai essayé avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form action="<?php echo $editFormAction; ?>" method="POST" name="form1" id="form1" onsubmit="return testcheck()">

mais l'envoi se fait toujours sans alerte...

[Auteur]

Il devrait pas y avoir de souci avec le code proposé par Bovino. On peut voir le code de ta fonction testcheck() ?
Tu utilises quel navigateur ?

[HAbroc]

Je viens de comprendre ...ce qui ne résoud pas mon problème .

J'ai une autre case à cocher dans mon formulaire qu'il est obligatoire de cocher. Oups !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<span id="sprycheckbox1">
    <input type="checkbox" name="yes" id="checkbox" value=""/>
<span class="checkboxRequiredMsg Style16 Style15 Style17">Obligatoire !</span></span>

Du coup , le problème est différent : il faut qu'une des 4 cases à cocher ( v1,v2,v3,v4 ) soit cochée et que yes soit obligatoirement cochée...

[Bovino]

Un peu d'imagination que diable...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 <form action="<?php echo $editFormAction; ?>" method="POST" name="form1" id="form1">
 <input class="toCheck" type="checkbox" name="v1" id="v1" value="Y"/>
 <input class="toCheck" type="checkbox" name="v2" id="v2" value="Y"/>
 <input class="toCheck" type="checkbox" name="v3" id="v3" value="Y"/>
 <input class="toCheck" type="checkbox" name="v4" id="v4" value="Y"/>
 <input type="submit" name="submit" value="Soumettre une question" onclick="testcheck()"/>
 <input type="hidden" name="MM_update" value="form1"  />
 </form>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function testcheck(){
    return document.querySelector('.toCheck:checked');
}

[HAbroc]

Je déprime...toujours rien.

J'ai même essayé avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onsubmit="return testcheck()

dans le <form

Pour info, j'ai testé avec IE et firefox

[Auteur]

je t'ai pourtant donné une solution il y a quelques jours et tu as marqué la discussion resolue
http://www.developpez.net/forums/d14...-cases-cocher/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function testcheck()
{
	var i, r;
	var listInput = document.getElementById("form1").getElementsByTagName("input");
 
	r = false;
	for (i=0; i<4; i++)
	{
		if (listInput[i].type=="checkbox")
		{
			r = r || listInput[i].checked;
		}
	}
 
	r = r && listInput[4].checked;
	return r;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 <form method="POST" name="form1" id="form1" onsubmit="return testcheck()" action="www.developpez.net">
 <input class="toCheck" type="checkbox" name="v1" id="v1" value="Y"/>
 <input class="toCheck" type="checkbox" name="v2" id="v2" value="Y"/>
 <input class="toCheck" type="checkbox" name="v3" id="v3" value="Y"/>
 <input class="toCheck" type="checkbox" name="v4" id="v4" value="Y"/><br/>
 
 <input type="checkbox" name="v5" id="v5" value="Y"/>Yes<br/>
 
 <input type="submit" name="submit" value="Soumettre une question" />
 <input type="hidden" name="MM_update" value="form1"  />
 </form>

[HAbroc]

je t'ai pourtant donné une solution il y a quelques jours et tu as marqué la discussion resolue

Effectivement, et tu peux voir en haut de ce post que j'avais appliqué ce que tu préconisais.

Toutefois, pour une raison que j'ignore, cela ne fonctionne pas ou pas tout à fait. Je m'explique.

J'ai créé une page avec seulement les 5 checkboxs; et dans ce cas là , le script fonctionne. Je coche bien v5 et le formulaire n'est envoyé qu'après avoir cocher v1,v2,v3 ou v4.

Pourtant, quand j'essaie de faire exactement la même chose dans mon formulaire définitif qui comporte déjà de nombreuses vérifications de formulaire , cela ne fonctionne pas : impossible de valider le formulaire.

Je pense que je vais essayer de travailler sur un if avant envoi du formulaire qui vérifiera que v1 et v2 et v3 et v4 n'est pas égal à zéro.

[Auteur]

Effectivement, et tu peux voir en haut de ce post que j'avais appliqué ce que tu préconisais.

ok. Dans mon esprit, je n'avais pas pensé à coder la solution de cette manière.

Pourtant, quand j'essaie de faire exactement la même chose dans mon formulaire définitif qui comporte déjà de nombreuses vérifications de formulaire

il y a peut-être un problème dans l'une de ces vérifications.

[SpaceFrog]

Un peu de lecture http://www.developpez.net/forums/d55...on-formulaire/

[HAbroc]

Un peu de lecture http://www.developpez.net/forums/d55...on-formulaire/

Merci pour le lien. Très clair pour moi