Page 1 sur 1
validation obligatoire de minimum un choix dans une checkbox
Posté : 24 févr. 2021, 16:56
par flexi2202
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
merci de l aide
Code : Tout sélectionner
<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" />
Re: validation obligatoire de minimum un choix dans une checkbox
Posté : 24 févr. 2021, 18:30
par or 1
j ai essaye pas mal de choses , cela fonctionne avec une liste mais pas avec deux
qu'est-ce qui a été testé ?
Re: validation obligatoire de minimum un choix dans une checkbox
Posté : 24 févr. 2021, 19:32
par flexi2202
merci de l aide j ai essaye avec cet exemple qui fonctionne par exemple
mais j arrive pas a le faire fonctionner pour pour mes deux listes
Code : Tout sélectionner
<!DOCTYPE HTML>
<html>
<head>
<title>At least one checkbox must be selected</title>
<meta charset="utf-8">
</head>
<body>
<form id="sectionForm" method="post">
<h3>Please select at least one item</h3>
<p><input type="checkbox" name="section" value="sports">Sports</p>
<p><input type="checkbox" name="section" value="business">Business</p>
<p><input type="checkbox" name="section" value="health">Health</p>
<p><input type="checkbox" name="section" value="society">Society</p>
<p><input type="submit" value="Submit"></p>
</form>
<script src="script.js"></script>
</body>
</html>
et le javascript
Code : Tout sélectionner
(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() ? 'At least one checkbox must be selected.' : '';
firstCheckbox.setCustomValidity(errorMessage);
}
init();
})();
Re: validation obligatoire de minimum un choix dans une checkbox
Posté : 25 févr. 2021, 01:47
par two3d
En JavaScript obligatoirement ou lors du traitement PHP aussi ? Je conseil en PHP car si il veut, l'utilisateur peut enlever le JavaScript et passer à l'étape suivante sans avoir coché un minimum de case
tu peux modifier cette ligne:
const checkboxes = form.querySelectorAll('input[type=checkbox]');
en
const checkboxes = form.querySelectorAll('input[name=section]');
puis tu fais une deuxième const avec tes autres checkbox
Re: validation obligatoire de minimum un choix dans une checkbox
Posté : 25 févr. 2021, 07:04
par flexi2202
bonjour
Merci pour la réponse et la solution
donc dans mon cas je dois écrire deux fois le bloc de code une première fois
avec
Code : Tout sélectionner
const checkboxes = form.querySelectorAll('input[name=technique]');
et une deuxième fois avec
Code : Tout sélectionner
const checkboxes = form.querySelectorAll('input[name=meteo]');
j aurais donc deux bloc d instructions en javascript
Re: validation obligatoire de minimum un choix dans une checkbox
Posté : 25 févr. 2021, 12:06
par two3d
Oui mais bien évidement avec un nom différent:
const checkboxes_technique //par exemple
const checkboxes_meteo//par exemple aussi
sinon tu va "écraser" la précédente
Re: validation obligatoire de minimum un choix dans une checkbox
Posté : 25 févr. 2021, 19:09
par flexi2202
un tout très grand merci pour cette aide en javascript
cela donnerait ceci alors
Code : Tout sélectionner
(function() {
const form = document.querySelector('#sectionForm');
const checkboxes_technique = 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() ? 'At least one checkbox must be selected.' : '';
firstCheckbox.setCustomValidity(errorMessage);
}
init();
})();
(function() {
const form = document.querySelector('#sectionForm');
const checkboxes_meteo = 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() ? 'At least one checkbox must be selected.' : '';
firstCheckbox.setCustomValidity(errorMessage);
}
init();
})();
Re: validation obligatoire de minimum un choix dans une checkbox
Posté : 25 févr. 2021, 19:53
par two3d
Oui en évitant de dupliquer des fonctions et de mettre le code dans un "(function() {", global mais ceci est inutile pour ton code, cette instruction sert à dire "exécute moi les fonctions à l'arrivée sur la page" mais vue que tu a un écouteur d'événement "...addEventListener('change')...", tu en a pas besoin
Re: validation obligatoire de minimum un choix dans une checkbox
Posté : 25 févr. 2021, 19:55
par flexi2202
merci pour la reponse
donc je laisse tout comme ca
désolé de poser des questions aussi banale ...
Re: validation obligatoire de minimum un choix dans une checkbox
Posté : 25 févr. 2021, 20:17
par two3d
b non ta plein de redondances inutiles, il te faut pas redéclarer des fonction qui existent déjà
un code propre donnerais ceci (ça te permettra d'apprendre avec un code qui te sert, j'espère...):
<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>
Re: validation obligatoire de minimum un choix dans une checkbox
Posté : 25 févr. 2021, 20:28
par flexi2202
je viens de faire l essai cela n a pas fonctionner ...
il est passe a l enregistrement des données sans faire quoi que ce soit
voici le code complet
Code : Tout sélectionner
<form id="sectionForm" method="post" action="">
<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 />
<script type="text/javascript">
(function() {
const form = document.querySelector('#sectionForm');
const checkboxes_technique = 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() ? 'At least one checkbox must be selected.' : '';
firstCheckbox.setCustomValidity(errorMessage);
}
init();
})();
(function() {
const form = document.querySelector('#sectionForm');
const checkboxes_meteo = 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() ? 'At least one checkbox must be selected.' : '';
firstCheckbox.setCustomValidity(errorMessage);
}
init();
})();
</script>
</form>
Re: validation obligatoire de minimum un choix dans une checkbox
Posté : 27 févr. 2021, 20:51
par flexi2202
oupss désolé j avais saute la solution je pense
la solution proposée fonctionne mais lorsque je dois ajouter une nouvelle liste de checbox entre les balises from je fais alors ..
car si je l ajoute comme ca elle va être confondue avec la première
Code : Tout sélectionner
<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>
Re: validation obligatoire de minimum un choix dans une checkbox
Posté : 27 févr. 2021, 23:44
par two3d
rajoute tes checkbox, met un name différent puis dans ton script tu fait une condition multiple avec "&&" soit:
if(verifier_si_cochee('techniques[]') && verifier_si_cochee('autre_checkbox[]'))
Pour dire: if("si" "et" "si") alors ok
Re: validation obligatoire de minimum un choix dans une checkbox
Posté : 28 févr. 2021, 11:54
par flexi2202
waouuuhhhh
cela semble fonctionner je dois faire des autres essais mais cela semble bon
un tout grand merci
Re: validation obligatoire de minimum un choix dans une checkbox
Posté : 28 févr. 2021, 13:19
par flexi2202
donc bravo 10/10