comment rendre obligatoire un choix dans un bouton radio
- Accueil
- Forum
- Programmation
- JavaScript
- comment rendre obligatoire un choix dans un bouton radio
flexi2202 Le 20 mai 2021 à 08:22 (Édité le 20 mai 2021 à 08:23)
bonjour a tous j ai une formulaire avec 5 groupes de bouton radio et je souhaiterais qu un bouton soit cocher de façon obligatoire par groupe par l utilisateur
je n y connais rien en javascript j ai tente de modifier un code existant mais cela sans succès rien ne se passe
d avance merci pour la correction
<div class="form-group">
<div class="card border-secondary text-secondary"style="margin-bottom:10px;">
<p>1. Avez vous déjà perler ?:</p>
<div>
<input type="radio" id="oui" name="drone" value="oui"
>
<label for="oui">oui</label>
</div>
<div>
<input type="radio" id="non" name="drone" value="non">
<label for="non">Non</label>
</div>
<div>
<input type="radio" id="juste_une_fois" name="drone" value="juste_une_fois">
<label for="juste_une_fois">Juste une fois</label>
</div>
<div>
<input type="radio" id="je_n_crois_pas" name="drone" value="je_n_crois_pas">
<label for="je_n_crois_pas">je n'y crois pas</label>
</div>
</div>
<div class="card border-secondary text-secondary"style="margin-bottom:10px;">
<p> 2. Apres la visite de mon blog , seriez vous prêt a sauter le pas ?</p>
<div>
<input type="radio" id="oui" name="drone1" value="oui"
>
<label for="oui">oui</label>
</div>
<div>
<input type="radio" id="non" name="drone1" value="non">
<label for="non">Non</label>
</div>
<div>
<input type="radio" id="peut_etre" name="drone1" value="peut_etre">
<label for="peut_etre">Peut-etre</label>
</div>
</div>
<div class="card border-secondary text-secondary"style="margin-bottom:10px;">
<p>3.Trouvez-vous des perles facilement ?</p>
<div>
<input type="radio" id="oui" name="drone3" value="oui"
>
<label for="oui">oui</label>
</div>
<div>
<input type="radio" id="non" name="drone3" value="non">
<label for="non">Non</label>
</div>
</div>
<div class="card border-secondary text-secondary"style="margin-bottom:10px;">
<p> 4. Connaissez vous des perleurs ?</p>
<div>
<input type="radio" id="oui" name="drone4" value="oui"
>
<label for="oui">oui</label>
</div>
<div>
<input type="radio" id="non" name="drone4" value="non">
<label for="non">Non</label>
</div>
</div>
<div class="card border-secondary text-secondary"style="margin-bottom:10px;">
<p> 5.Que penses tu de mon blog?</p>
<div>
<input type="radio" id="tres_bien" name="drone5" value="tres_bien"
>
<label for="tres_bien">Tres bien</label>
</div>
<div>
<input type="radio" id="bien" name="drone5" value="bien">
<label for="bien">bien</label>
</div>
<div>
<input type="radio" id="satisfaisant" name="drone5" value="satisfaisant">
<label for="satisfaisant">Satisfaissant</label>
</div>
<div>
<input type="radio" id="faible" name="drone5" value="faible">
<label for="faible">faible</label>
</div>
<div>
<div class="form-group">
<input type="submit" name="send" value="Envoyer le message"/>
<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(e){
let verif1 = verifier_si_cochee('drone');
let verif2 = verifier_si_cochee('drone1');
let verif3 = verifier_si_cochee('drone3');
let verif4 = verifier_si_cochee('drone4');
let verif5 = verifier_si_cochee('drone5');
if(verif1 && verif2 && verif3 && verif4 && verif5 ) {
return true;
} else {
e.preventDefault();
//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+,'"]:checked')
if( input.length > 0 ){
return true;
}else{
alert("Vous devez choisir au moins une case dans :" + name_input);
return false;
}
}
</script>