Affichage sur un data-error

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:

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:

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:

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;
    }

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:

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:

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:

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; }

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