Discussion :

[swanito]

Bonjour tout le monde,

Je voudrais afficher deux erreurs différentes sur un champ d'un formulaire ('balise non vide' et 'obligation d'être majeur') pour cela j'ai défini mes data-error dirrectement dans mon html, j'ai fait une condition en js qui fonctionne très bien, et je les changes avec mon css.

Le problème et que je vois que je modifie bien mon HTML correctement dans mes balise mais le il y que la première "data-error" qui s'affiche et ne disparait pas, j'ai remarqué que quand je les changes de place dans le css c'est la deuxième data-error qui s'affiche et qui ne disparait pas.

Voici mon code pour y voir plus clair :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
              <div
                class="formData birthdate" data-error="Vous devez entrer votre date de naissance." data-error-visible="false" data-error-1="Vous devez être majeur pour participer à cet événement" data-error-1-visible="false">
                <label for="birthdate">Date de naissance</label><br>
                <input
                  class="text-control"
                  type="date"
                  id="birthdate"
                  name="birthdate"
                /><br>
              </div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
.formData[data-error]::after {
  content: attr(data-error);
  font-size: 0.4em;
  color: #e54858;
  display: block;
  margin-top: 7px;
  margin-bottom: 7px;
  text-align: right;
  line-height: 0.3;
  opacity: 0;
  transition: 0.3s;
}
.formData[data-error-1]::after {
  content: attr(data-error-1);
  font-size: 0.4em;
  color: #e54858;
  display: block;
  margin-top: 7px;
  margin-bottom: 7px;
  text-align: right;
  line-height: 0.3;
  opacity: 0;
  transition: 0.3s;
}
.formData[data-error-visible="true"]::after {
  opacity: 1;
}
.formData[data-error-1-visible="true"]::after {
  opacity: 1;
}
.formData[data-error-visible="true"] .text-control {
  border: 2px solid #e54858;
}
.formData[data-error-1-visible="true"] .text-control {
  border: 2px solid #e54858;
}

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
    const birthdateCheck = (value) => {
        const error = document.querySelector('.birthdate');
        let valid = false;
        const currentYear = new Date().getFullYear();
 
        if (!value) {
            error.setAttribute('data-error-visible', 'true');
            error.setAttribute('data-error-1-visible', 'false');
        }
        else {
            error.setAttribute('data-error-visible', 'false');
            const parts = value.split('/');
            const birthYear = parseInt(parts[0], 10);
 
            if (currentYear - birthYear < 18) {
                console.log(error);
                error.setAttribute('data-error-1-visible', 'true');
            } 
            else {
                valid = true;
                error.setAttribute('data-error-1-visible', 'false');
            }
        }
        return valid;
    }

[NoSmoking]

Bonjour et bienvenue sur DVP.

Les pseudo-éléments, que ce soit ::before ou ::after sont uniques pour un élément donné.

Mettre plusieurs règles CSS sur un de ces éléments entraine l'écrasement des déclarations de la règle précédente.
Quand tu écris :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.formData[data-error]::after {  /*--(1)--*/
  /*-- les déclarations --*/
}
.formData[data-error-1]::after {  /*--(2)--*/
  /*-- les déclarations --*/
}

... comme il s'agit du même élément la règle 2 prend le dessus.

Dans ton cas tu pourrais jouer avec un ::before et un ::after mais bon ...

Ton soucis est que tu veux changer le libellé, soit le content, suivant l'état donc autant faire simple :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
/*-- déclaration unique --*/
.formData.birthdate::after {
  color: #e54858;
  display: block;
  margin-top: 7px;
  margin-bottom: 7px;
  text-align: right;
  line-height: 0.3;
  opacity: 0;
  transition: 0.3s;
}

... et changement du content :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.formData[data-error-visible="true"]::after {
  content: attr(data-error);
  opacity: 1;
}
.formData[data-error-1-visible="true"]::after {
  content: attr(data-error-1);
  opacity: 1;
}

[swanito]

Parfait ça à tout résolut, je cherchais trop loint enfait, merci à toi !