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