Bonsoir chers Agrumes, voici mon problème (plutôt classique direz-vous), j'ai un formulaire que je veux gérer dynamiquement. Ainsi je voudrais que dès que l'utilisateur passe un champ, s'il est correct, il soit entouré de vert (j'ai une classe CSS pour ça), et s'il est incorrect il soit entouré de rouge (j'ai une autre classe CSS pour ça) Le problème vient de mes inputs radio. Quand je fais une boucle pour parcourir ces différents inputs et les ajouter un évènement "change" ça ne marche pas. Par contre que je le fais sur un champs texte, ça marche correctement
Code partiel HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Un formulaire interactif</title> <!-- Bootstrap --> <link href="bootstrap.css" rel="stylesheet"> </head> <body> <div class="container"> <form id="myForm" class="form-horizontal col-lg-4"> <div class="form-group"> <label class="control-label" for="sexe">Sexe :</label> <div class="radio"> <label><input name="sex" type="radio" value="H" />Homme</label> </div> <div class="radio"> <label><input name="sex" type="radio" value="F" />Femme</label> </div> </div> <div class="form-group"> <label class="control-label" for="lastName">Nom :</label> <input name="lastName" id="lastName" type="text" class="form-control" /> </div> . . . <input type="submit" class="btn btn-primary" value="M'inscrire" /> <input type="reset" class="btn btn-primary" value="Réinitialiser le formulaire" /> </form> </div> <script src="verification.js"></script> </body> </html> |
Code partiel javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | var formulaire = document.getElementById('myForm'); //Gestion des inputs aux changements de valeur var radio = document.querySelectorAll('input[type=radio]'); for(var j = 0, taille = radio.length; j < taille; j++) { radio[j].addEventListener('change', function(e){ if(radio[j].checked) { alert('yo'); retirerErreur('sexe'); } }, false); } var nom = document.getElementById('lastName'); nom.addEventListener('change', function(e){ if(nom.value.length < 2) correction(e, 'lastName', 'Vous devez entrer un nom d\'au moins 2 caractères', false); else retirerErreur('lastName'); }, false); |
Comme vous le voyez dans le code javascript, sur mon champ texte j'applique une méthode correction, qui se charge d'entourer de rouge le champ et une autre retirerErreur qui se charge d'enlever le rouge et le remplace par le vert. Cela marche très bien.
Par contre sur mes radio, ce n'est pas le cas. Quelqu'un aurait une idée du problème?
Merci d'avance 
