Est-il possible de savoir si un input est vide avec seulement du CSS et du HTML ?
Dans ce tutoriel, je vais vous donner quelques astuces pour vérifier si un input est valide ou non avec seulement du CSS et du HTML, cette astuce n’est cependant pas à utiliser seul mais plutôt en accompagnement avec une validation PHP mais ça reste une alternative intéressante si vous ne voulez pas trop vous embêter avec du Javascript.
Vérifier si l’input est vide
D’abord, construisons un formulaire. Nous allons utiliser un formulaire simple avec un input, ensuit pour vérifier si l’input est vide pendant la validation du formulaire HTML, J’ajoute l’attribut obligatoire required.
<form>
<label> Input </label>
<input type="text" name="input" id="input" required />
</form>Jusqu’ici rien de compliqué, l’attribut required est assez connus, il existe également readonly qui permet d’empécher la modification d’une valeur par défaut.
À ce stade, il y a un problème : si l’utilisateur entre un espace blanc dans le champ, l’input est « remplie », techniquement, c’est exact, l’input est remplie parce que l’utilisateur y a tapé quelque chose mais on ne voudrais pas que les espaces blanc rende l’input valide.
Ce n’est pas assez, nous avons donc besoin d’un contrôle plus rigoureux.
Vérifications complémentaires
HTML vous donne la possibilité de valider les inputs avec des expressions régulières avec l’attribut pattern.
Comme nous ne voulons pas que les espaces blancs soient reconnus, nous allons essayé avec le schéma suivant .*S.*. Ce schéma signifie : Un ou plusieurs caractères qui ne sont pas des espaces.
<form>
<label> Input </label>
<input type="text" name="input" id="input" required pattern=".*S.*"/>
</form>Les inputs invalides
Nous ne voulons pas utiliser :invalid parce que nous n’allons pas démarrer l’input avec un état invalide. (Lorsque l’input est vide, elle est déjà invalide).
Il existe la pseudo-classe :placeholder-shown qui peut être utilisé pour vérifier si le placeholder est affiché, l’idée est :
- Vous ajoutez un caractère à votre saisie
- Si le placeholder est cachée, cela signifie que l’utilisateur a tapé quelque chose dans le champ
- Procédez à la validation (ou à l’invalidation)
/* Afficher les bordures rouges lorsqu'elles sont remplies, mais non valides */
input:not(:placeholder-shown) {
border-color: red;
}Attention, assurez-vous que les styles valides viennent après les styles invalides.
/* Afficher les bordures rouges lorsqu'elles sont remplies, mais non valides */
input:not(:placeholder-shown) {
border-color: hsl(0, 76%, 50%);;
}
/* Afficher les bordures vertes lorsqu'elles sont valides */
input:valid {
border-color: green;
}Attention : Edge ne prend pas en charge le caractère de :placeholder-shown, donc ce n’est probablement pas encore une bonne idée de l’utiliser en production. Il n’y a pas de bon moyen de détecter cette pseudo-classe.
