Je fait un formulaire dans lequel un utilisateur doit faire un choix entre plusieurs événements, et j'aimerais que quand aucune case n'est choisie qu'un message d'erreur s'affiche tant qu'il n'en a pas sélectionné une. J'ai essayer de le faire en javascript mais rien ne ce passe quand je fais le test.
Merci d'avance.
Voici mon code HTML:
<form method="post" action="fiche_signal.php" name="form" id="form">
<input type ="checkbox" name="evenement[0]" value = "Affectation au cours de la periode" id="evenement"></input>
<input type ="checkbox" name="evenement[1]" value = "Changement de manager" id="evenement1"></input>
<input type ="checkbox" name="evenement[2]" value = "Evolution de methode de travail" id="evenement2"></input>
<input type ="checkbox" name="evenement[3]" value = "Longue abscence" id="evenement3"></input>
<input type ="checkbox" name="evenement[4]" value = "Autres Evenement" id="evenement4"></input>
<input type ="checkbox" name="evenement[5]" value = "Aucun Evenement" id="evenement5></input>
</form>
voici mon code javascript:
<head>
<title>EVENEMENT</title>
<script>
function ctr()
{
var listOfInputs = document.getElementsByTagName('evenement[]');
var listOfInputsLength = listOfInputs.length;
var atLeastOneChecked = false;
for (var i=0; i < listOfInputsLength; i++)
{
if (listOfInputs[i].ckecked)
{
atLeastOneChecked = true;
break;
}
}
if(atLeastOneChecked)
{
return true;
}
else
{
alert("rien n'est coché");
return false;
}
}
</script>
</head>
A voir également:
Verifier si checkbox est coché javascript
Verifier si un checkbox est coché jquery - Meilleures réponses
Je vois déjà 2-3 erreurs :
- getElementsByTagName => Retourne un tableau (Array) d'objets HTML à partir de nom de la balise (tag en anglais). Ici evenement est le nom, et nom un tag
le listOfInputsLength aurait pu te mettre la puce à l'oreille, il est initialisé à 0.
- manque un guillemet à l'id du dernier checkbox
- problème de synthaxe :
listOfInputs[i].ckecked => listOfInputs[i].checked (on ne confond pas k et h quand même)
j'ai essayé de toucher au minimum ton script, ce qui donne :
<form method="post" action="fiche_signal.php" name="form" id="form">
<input type ="checkbox" name="evenement[0]" value = "Affectation au cours de la periode" id="evenement0"></input>
<input type ="checkbox" name="evenement[1]" value = "Changement de manager" id="evenement1"></input>
<input type ="checkbox" name="evenement[2]" value = "Evolution de methode de travail" id="evenement2"></input>
<input type ="checkbox" name="evenement[3]" value = "Longue abscence" id="evenement3"></input>
<input type ="checkbox" name="evenement[4]" value = "Autres Evenement" id="evenement4"></input>
<input type ="checkbox" name="evenement[5]" value = "Aucun Evenement" id="evenement5"></input>
<input type="button" onclick="ctr()" value="valider"></input>
</form>
changement d'id pour le premier checkbox
rajout du guillement manquant
<script>
function ctr()
{
var atLeastOneChecked = false;
var i = 0;
while (document.getElementById("evenement" + i))
{
if (document.getElementById("evenement" + i).checked)
{
atLeastOneChecked = true;
break;
}
i++;
}
if(atLeastOneChecked == true)
{
return true;
}
else
{
alert("rien n'est coché");
return false;
}
}
</script>
edit : manquait un bouton valider aussi ....
dans la fonction ctr(), il te suffira de rajouter un submit du form pour terminer ton formulaire
