Vous avez toujours voulu vérifier dynamiquement les valeurs entrées par vos utilisateurs dans un champ de formulaire sans utiliser JavaScript ? Voici comment modifier le style d'un champ quand un nombre entré par l'utilisateur est invalide !
1ère étape : le HTML
Commençons par créer un champ de formulaire tout à fait classique, qui dispose d'un type number :
<input type="number" min="0" max="100" placeholder="Pourcentage de réduction" />Nous allons utiliser l'exemple d'un utilisateur qui doit rentrer un pourcentage de réduction pour un produit. Nous n'acceptons pas les pourcentages négatifs (ce serait très étrange n'est-ce pas) et les pourcentages supérieurs à 100 : nous n'allons tout de même pas donner de l'argent à nos acheteurs lorsqu'ils paieront un produit.
2ème étape : le CSS
Commençons par styliser très sommairement notre champ de formulaire :
input {
width: 300px;
padding: 15px;
border-radius: 5px;
border: 3px solid silver;
outline: none;
}Rien de nouveau et tout est plutôt simple à comprendre : notre input fera 300px de largeur avec une bordure de 3px de largeur.
3ème étape : détecter une valeur incorrecte
Il faut juste que nous utilisions out-of-range pour appliquer le style à l'élement input :
input:out-of-range {
border-color: red;
background: #ff758f;
}Et c'est tout ! Essayez d'entrer une valeur qui n'est pas valide.
4ème étape : optimisation
Bon, le problème c'est qu'actuellement tous nos inputs recoivent ce sélecteur et ce n'est pas très efficace... Nous pouvons utiliser out-of-range sur les champs qui contiennent un nombre minimal et un nombre maximal.
Il est donc très facile de préciser que out-of-range doit s'utiliser uniquement sur les inputs avec un attribut type qui vaut number.
input[type="number"]:out-of-range {
border-color: red;
background: #ff758f;
}
Nous avons dorénavant un code très simple et très bien pensé qui fonctionne merveilleusement bien pour changer le style de nos champs lorsqu'une valeur n'est pas correcte.
