Tester qu'au moins un chekbox est cochée

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:

---

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:

---

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é ...

C'est tout à fait normal ! :aie:

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:

---

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:

---

1 2 3

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

---

et pour le formulaire :

Code:

---

<form onsubmit="return testcheck()">

---

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

dans le head,

Code:

---

1 2 3

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

---

et dans le body,

Code:

---

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

---

bonjour,

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

Code:

---

<form onsubmit="return testcheck()">

---

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

j'ai essayé avec

Code:

---

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

---

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

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 ?

Je viens de comprendre :oops: ...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:

---

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...

Un peu d'imagination que diable... :roll:

Code:

---

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:

---

1 2 3

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

---

Je déprime...toujours rien.

J'ai même essayé avec

Code:

---

onsubmit="return testcheck()

---

dans le <form :lol:

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

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

Code:

---

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:

---

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>

---

Citation:

---

Envoyé par Auteur

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

---

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.

Citation:

---

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.

Citation:

---

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.

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

Citation:

---

Envoyé par SpaceFrog

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

---

Merci pour le lien. Très clair pour moi :D