Problème de gestion d'évènements d'un tableau d'inputs

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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 :)

Édité par Coyote

+0 -0
Staff

Cette réponse a aidé l'auteur du sujet

Tout simplement parce que ligne 8, j correspond à la dernière valeur affectée, soit taille - 1.

Donc radio[j] correspond toujours au dernier input de ta page.

Utilise plutôt this (ou e.target) pour récupérer la cible de l'événement.


Soit dit en passant, en HTML5 il y a des attributs pour valider les champs sans JS. Et des pseudo-classes CSS pour styliser les champs en fonction de cette validation ;)

Édité par viki53

Auteur du sujet

J'ai pas vraiment saisi la valeur que prend j. Ce ne serait pas simplement 0 et 1. En tout cas, en passant par target, ça marche. Merci :D

Soit dit en passant, en HTML5 il y a des attributs pour valider les champs sans JS. Et des pseudo-classes CSS pour styliser les champs en fonction de cette validation ;)

viki53

Tu parles des pseudo… (j'oi oublié le nom complet) comme required, c'est ça?

+0 -0
Staff

Cette réponse a aidé l'auteur du sujet

J'ai pas vraiment saisi la valeur que prend j.

j est la variable qui te permet de boucler : elle va de 0 à taille - 1. Mais dans le contexte de l'événement, vu que le scope est différent, elle vaut toujours taille - 1 (la boucle étant terminée quand l'événement a lieu, quel que soit l'input).

Soit dit en passant, en HTML5 il y a des attributs pour valider les champs sans JS. Et des pseudo-classes CSS pour styliser les champs en fonction de cette validation ;)

viki53

Tu parles des pseudo… (j'oi oublié le nom complet) comme required, c'est ça?

lewoudar

Les attributs required, pattern et autres, oui. ;)

Ça ne remplace pas toujours le JS, mais ça permet d'en éviter une bonne couche (sans oublier de faire les vérifications côté serveur, évidemment).

Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte