Ce site utilise des cookies pour améliorer uniquement votre expérience utilisateur.
Vous pouvez lire à tout moment comment nous utilisons les cookies sur le site.
Obliger une case a être cochée dans un checkbox
Résolu
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
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
<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" />
Salut @flexi2202,
Voici le code fonctionnel pour ton cas :
HTML :
<form method="post" action="" id="sectionForm">
<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" />
</form>
JS :
(function() {
const form = document.querySelector('#sectionForm');
const checkboxes = form.querySelectorAll('input[type=checkbox]');
const checkboxLength = checkboxes.length;
const firstCheckbox = checkboxLength > 0 ? checkboxes[0] : null;
function init() {
if (firstCheckbox) {
for (let i = 0; i < checkboxLength; i++) {
checkboxes[i].addEventListener('change', checkValidity);
}
checkValidity();
}
}
function isChecked() {
for (let i = 0; i < checkboxLength; i++) {
if (checkboxes[i].checked) return true;
}
return false;
}
function checkValidity() {
const errorMessage = !isChecked() ? 'Au moins une case à cocher doit être sélectionnée.' : '';
firstCheckbox.setCustomValidity(errorMessage);
}
init();
})();
A + 😉
salut Doppler
merci pour la solution
cela fonctionne pour le premier checkbox
mais pas pour la deuxième liste
Salut @flexi2202,
Voici le code fonctionnel pour ton cas :
HTML :
<form method="post" action="" id="sectionForm">
<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" />
</form>
JS :
(function() {
const form = document.querySelector('#sectionForm');
const checkboxes = form.querySelectorAll('input[type=checkbox]');
const checkboxLength = checkboxes.length;
const firstCheckbox = checkboxLength > 0 ? checkboxes[0] : null;
function init() {
if (firstCheckbox) {
for (let i = 0; i < checkboxLength; i++) {
checkboxes[i].addEventListener('change', checkValidity);
}
checkValidity();
}
}
function isChecked() {
for (let i = 0; i < checkboxLength; i++) {
if (checkboxes[i].checked) return true;
}
return false;
}
function checkValidity() {
const errorMessage = !isChecked() ? 'Au moins une case à cocher doit être sélectionnée.' : '';
firstCheckbox.setCustomValidity(errorMessage);
}
init();
})();
A + 😉
Ce site utilise des cookies pour améliorer uniquement votre expérience utilisateur.
Vous pouvez lire à tout moment comment nous utilisons les cookies sur le site.