Damien Flandrin

Tutoriels, astuces et conseils sur le développement web par un développeur web

Tutoriel - Comment vérifier si un input est vide avec du CSS et du HTML

il y a 7 mois · 2 MIN DE LECTURE
#HTML  #Tutoriel  #CSS 

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 :

  1. Vous ajoutez un caractère à votre saisie
  2. Si le placeholder est cachée, cela signifie que l'utilisateur a tapé quelque chose dans le champ
  3. 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.

···

Damien Flandrin

Je suis développeur web pour l'agence Carredas, je fais principalement du PHP avec Laravel et Prestashop.
comments powered by Disqus


Développeur Web - Damien Flandrin