11397 sujets

JavaScript, DOM et API Web HTML5

bonjour a tous
j ai un formulaire dans lequel
j ai plusieurs listes avec des choix de checkbox je souhaiterais savoir comment je peux obliger l utilisateur a devoir au minimum faire un choix par liste
voici mon fichier pour démarrer
<form method="post" action="">
<br />
<h2 >esches utilisees </h2>
<input type="checkbox" name="technique[]" value="perle">perle
<input type="checkbox" name="technique[]" value="graine">graines
<input type="checkbox" name="technique[]" value="asticot">asticot/pinkies
<input type="checkbox" name="technique[]" value="pelets">pelets
<br />
<h2>meteo: </h2>
<input type="checkbox" name="meteo[]" value="vaseux">vaseux
<input type="checkbox" name="meteo[]" value="vent">vent
<input type="checkbox" name="meteo[]" value="pluie">pluie
<input type="checkbox" name="meteo[]" value="neige">neige
<input type="checkbox" name="meteo[]" value="soleil">soleil
<input type="checkbox" name="meteo[]" value="nuageux">nuageux
<br />
<input type="submit" name="submit" value="Valider" />



j'ai essaye pas mal de choses , cela fonctionne avec une liste mais pas avec deux
ou alors faut connaître javascript et de ce cote , j'y connais rien

dans mon exemple je souhaites rendre obligatoire au moins un élément de la liste météo et au moins un élément de la liste technique

j avais trouve cette solution mais je n arrive pas a l appliquer pour mes deux lites

https://vyspiansky.github.io/2019/07/13/javascript-at-least-one-checkbox-must-be-selected/

merci de l aide
Modérateur
Salut,

Dans ton exemple il va récupérer toutes les checkbox du form :
    const form = document.querySelector('#sectionForm');
    const checkboxes = form.querySelectorAll('input[type=checkbox]');


Toi il faut que tu ne récupères qu'un partie. Il faut que tu différencie tes checkbox (en les regroupant dans un élément ou en leur donnant une classe commune) et que tu changes ces sélecteurs pour que tu ne sélectionne que les checkbox que tu veux.
voila c est regler via cette astuce
merci de l aide

<form method="post" id="sectionForm">
<input type="checkbox" name="techniques[]" value="valeur1"> Technique 1<br/>
<input type="checkbox" name="techniques[]" value="valeur2"> Technique 2<br/>
<input type="checkbox" name="techniques[]" value="valeur3"> Technique 3<br/>
<input type="checkbox" name="techniques[]" value="valeur4"> Technique 4<br/>
<input type="submit">
</form>
<script>
//on selectionne notre form sur lequel on souhaite écouter les évenements
const formulaire = document.querySelector('#sectionForm');
//si on clic sur "Envoyer" on vérifi si il y a un minimum de case cochées:
formulaire.onsubmit = function(){
if(verifier_si_cochee('techniques[]'))
return true;
else {
//on affiche un petit message
formulaire.append("Vous devez cocher au moins une case");
//et on bloque le soumission du form:
return false;
}
}
function verifier_si_cochee(name_input) {
//avec cette fonction, on boucle chaque case et retourne true si ya une case cochée
let input=formulaire.querySelectorAll('input[name="'+name_input+'"]')
for (let i = 0; i < input.length; i++) {
if(input[i].checked)
return true;
}
//sinon on retourne false
return false;
}
</script>
Meilleure solution