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