problème avec une vérification de checkbox
Posté : 19 mai 2021, 16:00
bonjour a tous
j ai un formulaire avec des cases a cocher et je souhaite rendre obligatoire une case a cocher dans chacune des deux choix
donc la technique et la meteo
cela fonctionne mais le soucis c est que j ai a chaque tentative ce petit message sous mon formulaire
undefined
et j aurais souhaiter que l on ne puisse cocher qu une seule case pour la meteo et une pour la technique
merci de l aide
j ai un formulaire avec des cases a cocher et je souhaite rendre obligatoire une case a cocher dans chacune des deux choix
donc la technique et la meteo
cela fonctionne mais le soucis c est que j ai a chaque tentative ce petit message sous mon formulaire
undefined
et j aurais souhaiter que l on ne puisse cocher qu une seule case pour la meteo et une pour la technique
merci de l aide
Code : Tout sélectionner
<div class="container1" style=" padding-left:15px;padding-right:15px; margin:auto;">
<form method="post" id="sectionForm">
<div class="row">
<div class="col-sm text-center">
<div class="form-label-group">
<button type="button" class="btn btn-danger"><h3 > Ne pas oublier d'entrer une valeur pour l esche. Merci.</h3></button>
</div> </br>
<div class="form-label-group">
<input type="checkbox" name="technique[]" value="perle">perle</br>
<input type="checkbox" name="technique[]" value="graine">graines</br>
<input type="checkbox" name="technique[]" value="asticot">asticot/pinkies</br>
<input type="checkbox" name="technique[]" value="pelets">pelets</br>
<input type="checkbox" name="technique[]" value="vaseux">vaseux</br>
</div>
</br>
<div class="form-label-group">
<button type="button" class="btn btn-info"> <h3>meteo: </h3></button>
</div>
<div class="form-label-group">
<button type="button" class="btn btn-danger"><h3 > Ne pas oublier d'entrer une valeur pour la météo. Merci</h3></button>
</div>
</br>
<div >
<input type="checkbox" name="meteo[]" value="vent">vent</br>
<input type="checkbox" name="meteo[]" value="pluie">pluie</br>
<input type="checkbox" name="meteo[]" value="neige">neige</br>
<input type="checkbox" name="meteo[]" value="soleil">soleil</br>
<input type="checkbox" name="meteo[]" value="nuageux">nuageux</br>
</div>
<div class="form-label-group">
<input type="submit" class="form-control"name="submit" value="Valider" />
</div>
</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('technique[]') && verifier_si_cochee('meteo[]'))
return true;
else {
//on affiche un petit message
formulaire.append(alert("Message à afficher"));
//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>
</div>
</div>
</div>