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 !
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.
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.
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.
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.
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.