Comprendre ce qu’est la validation de formulaire HTML5 et l’étiquette d’entrée flottante

La mise en œuvre de la validation des formulaires joue un rôle essentiel pour empêcher les utilisateurs malveillants de saisir du texte charabia dans les champs du formulaire. En outre, cela empêche les utilisateurs inexpérimentés de saisir par erreur des informations erronées dans le formulaire.

Bien sûr, vous ne voudriez pas collecter des données incorrectes auprès des utilisateurs de manière non sécurisée. Il est donc impératif pour vous de définir des règles de validation des formulaires.

Pendant des années, nous avons utilisé le code JavaScript complexe et TL; DR (c’est-à-dire trop long ; n’a pas lu) pour implémenter la validation de formulaire côté client. Heureusement, avec la sortie de "validation de formulaire HTML5", nous pouvons désormais ajouter des validations à un formulaire avec un minimum de JavaScript.

Bien que la dernière version HTML offre plusieurs avantages, le plus important est qu’elle est livrée avec de nombreux nouveaux champs de saisie et attributs essentiels pour valider un formulaire sans avoir besoin d’écrire un code de validation JS (abréviation de JavaScript) compliqué.

Mais rappelez-vous que les utilisateurs peuvent facilement devenir frustrés lorsqu’ils remplissent un formulaire, en particulier lorsqu’ils apprennent que les données qu’ils ont saisies étaient erronées, ce qui peut augmenter encore plus leur frustration. Mais grâce à HTML5, l’ajout d’étiquettes d’entrée flottantes peut valider les données du formulaire en même temps que les utilisateurs remplissent le formulaire. De cette façon, les utilisateurs sauront immédiatement s’ils font une erreur dans les champs de saisie.

Par exemple, vous trouverez ci-dessous une image publiée sur Dribble par Matt Smith qui montre comment le motif d’étiquette flottante fonctionne lorsqu’il est appliqué à un formulaire :

Cet article explique comment implémenter des étiquettes d’entrée flottantes lors de l’ajout de validations à un formulaire HTML5.

Mais avant de commencer

La plupart d’entre vous voudront peut-être d’abord connaître le processus de validation d’un formulaire HTML5. Après tout, vous n’avez peut-être pas tous l’expérience de l’écriture de code de validation pour un formulaire HTML5. De plus, il est possible que vous n’ayez pas connaissance des champs de saisie et des attributs nouvellement introduits dans HTML5.

Un aperçu détaillé de la validation de formulaire HTML5

Lorsque vous envisagez de valider un formulaire, il est conseillé de commencer par la validation côté serveur. Et, si vous êtes un bon concepteur Web, ajoutez une validation côté client, aidant vos utilisateurs à obtenir des commentaires instantanés, qu’ils remplissent le formulaire avec des données correctes ou non. Par exemple, fournir un retour immédiat aux utilisateurs lorsqu’ils saisissent des données dans le champ de l’adresse e-mail leur permettra de savoir que l’adresse e-mail qu’ils ont saisie était valide.

L’une des grandes fonctionnalités de HTML5 est qu’il aide à implémenter la validation côté client sans dépendre des scripts. Vous pouvez plutôt effectuer une telle tâche en utilisant des "attributs de validation" sur vos éléments de formulaire. Plus important encore, il vous suffit d’ajouter l’attribut "obligatoire" pour un champ de saisie tandis que le reste est pris en charge par votre navigateur.

Voici un exemple qui expliquera l’utilisation de l’attribut required pour ajouter une validation à un champ de saisie :

Name: <input type="text" name="yourname" required>

La ligne de code ci-dessus indique à votre navigateur que le champ INPUT du nom doit être considéré comme obligatoire (c’est-à-dire qu’il ne peut pas être laissé vide).

Comme vous pouvez le voir, un marqueur rouge s’affiche dans la zone de texte correspondant au champ de saisie "Votre nom". Mais dès que du texte est saisi dans le champ de saisie du nom, le marqueur se transforme en une coche indiquant que la valeur saisie est valide.

Outre <input type="text">(c’est-à-dire les types de saisie de texte), HTML5 prend désormais en charge plusieurs nouvelles options de saisie telles que la recherche, l’e-mail, le téléphone, la date et l’heure, etc. En termes simples, avec HTML5, nous pouvons écrire la ligne de code ci-dessous :

<input type="text" name="email">

en quelque chose comme :

<input type="email" name="email">

Les navigateurs de bureau afficheront le code ci-dessus comme n’importe quel champ de texte standard.

Une autre chose importante que je voudrais porter à votre attention est que: lorsque vous essayez d’entrer les attributs tels que required ou input type="email" dans la démo CodePen même sans aucun contenu, vous obtiendrez toujours une erreur message en cliquant sur le bouton "SOUMETTRE" sans adresse e-mail valide :

Dans l’exemple dont nous avons parlé ci-dessus, vous pouvez voir que le navigateur affiche par défaut un message d’erreur. Mais que se passe-t-il si vous souhaitez appliquer votre propre règle de validation (c’est-à-dire personnalisée) à la valeur d’entrée ? C’est là que le modèle Regex est utile.

Comprendre les modèles RegEx

Vous avez peut-être vu des modèles lors de la saisie d’une adresse e-mail comme abc@a. Inutile de dire que vous voudriez que vos utilisateurs entrent une véritable adresse e-mail. Et, en spécifiant votre propre choix de modèle qui correspond à vos données, vous aiderez à valider la valeur saisie. Par exemple, vous pouvez vous assurer que l’e-mail correspond au modèle contenant trois caractères ou plus à la fin. Pour ce faire, vous devrez utiliser "l’attribut Pattern" et les expressions régulières (RegEx).

RegEx est essentiellement un langage utilisé pour analyser ou manipuler le texte. Le plus souvent, les expressions régulières sont utilisées pour effectuer des opérations complexes (telles que la recherche et le remplacement) pour une meilleure formation des données textuelles. Aujourd’hui, vous pouvez trouver l’utilisation d’expressions régulières dans presque tous les langages de programmation et de script. RegEx peut être utilisé pour valider les données saisies dans les champs du formulaire, en les appliquant sur les types d’entrée en utilisant l’attribut pattern comme suit :

<input id="phone" placeholder="111-111-1111" title="Text to convey pattern for telephone number" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

De plus, si des erreurs de validation se produisent, vous pouvez choisir de déterminer un attribut de titre avec l’erreur de validation pour lancer un message en plus de "Mauvais format !" en utilisant la ligne de code ci-dessous :

<input type="email" placeholder="Email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Kindly enter a valid email address here.">

Gardez à l’esprit que vous n’avez pas besoin d’écrire de modèle absurde pour chaque entrée. Au lieu de cela, dans de nombreux cas, vous n’aurez qu’à attribuer l’attribut requis à un type de données particulier. Par exemple, un nombre supérieur à 8 ressemblera à :

<input type="number" min="8" required>

Gardez également à l’esprit que tous les navigateurs ne prennent pas en charge tous les attributs de validation disponibles. Prenez, par exemple, le navigateur Firefox n’est pas compatible avec le modèle "minlength".

Avantages de l’utilisation de la validation de formulaire HTML5

Le plus grand avantage de la mise en œuvre de la validation de formulaire HTML5 est la rétroaction instantanée. Généralement, une sorte d’indication sera mise en évidence pendant que les utilisateurs remplissent un champ dans un formulaire, pour les informer si la valeur saisie était valide ou non.

Désormais, lorsque vous saisissez quelque chose dans la zone de texte, la couleur de la bordure passe au vert comme suit :

Cependant, comme vous pouvez le voir, il y a un inconvénient à cette approche. Même lors de l’ajout d’une valeur invalide (ou incomplète) dans le champ ‘Prénom’, l’utilisateur obtient une indication que la valeur est correcte. Peut-être, vous pouvez penser à ajouter :invalid:not(:empty)dans le code. Malheureusement, une telle logique ne fonctionnera pas avec les navigateurs car ils considèrent généralement que les éléments de formulaire sont vides.

Vous vous demandez quoi faire ?

Vous pouvez essayer d’ajouter le nouveau pseudo-sélecteur appelé ":placeholder-shown" dans le code comme suit :

<form>
  <label>
    <span>First Name</span>
    <input type="text" pattern=".{4,}" placeholder=" " required title="Enter at least 4 characters.">
  </label>
 
  <button>Submit</button>
 
</form>

Mais la plupart des navigateurs ne semblent pas prendre en charge les espaces réservés affichés, il est donc préférable que vous écriviez un script pour basculer une classe lorsque le champ de saisie est vide ou non. Voici le code JavaScript pour le même :

$('input:empty, textarea:empty').addClass('empty');
 
$('input').keyup(function() {
 
  if ($(this).val().trim() !== '') {
 
    $(this).removeClass('empty');
 
  } else {
 
    $(this).addClass('empty');
 
  }
 
});

REMARQUE: n’oubliez pas de supprimer l’élément d’espace réservé du balisage HTML ci-dessus.

Maintenant, lorsque vous exécutez l’extrait de code ci-dessus avec le balisage HTML5, le résultat ressemblera à :

Comme vous pouvez le voir, la couleur de la zone de texte reste rouge jusqu’à ce que la validation appliquée au champ ne soit pas remplie. Et cliquer sur Soumettre affiche un message d’erreur lors de la saisie d’un nom incomplet.

Mais, dès que l’utilisateur saisit le texte complet (plus de 3 caractères), la couleur de la bordure de la zone de texte passe au vert.

Comment pouvez-vous ajouter une étiquette d’entrée flottante en HTML5 ?

Et maintenant, discutons de l’approche consistant à ajouter une étiquette d’entrée flottante lors de la validation de votre formulaire HTML5. Cela aide à améliorer l’apparence du formulaire. Voici le balisage HTML.

Pour implémenter le modèle d’étiquette flottante, vous devrez placer la balise juste en dessous de l’ <input>élément dans votre balisage HTML :

<form>
 <label>
<input type="text" pattern=".{4,}" required title="Characters should not be less than 4.">
    <span>Your Name</span>
  </label>
 <label>
 <input type="email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Please enter a valid email.">
    <span>Your Email</span>
  </label>
  <button>Submit</button>
 
</form>

CSS ressemblera à quelque chose comme :

label {
  position: relative;
  display: inline-block;
}
label span {
  position: absolute;
  left: 20px;
  top: -2em;
  font-size: .75em;
  cursor: text;
  color: #f27853;
  transition: all 150ms ease;
}
input {
  border: 1px solid #f2f2f2;
  outline: none;
}
input:focus {
  border-color: #d9d9d9;
}
input:valid {
border-color: #42d142;
}
input:invalid {
  border-color: #ff8e7a;
}
input.empty {
  border-color: #d9d9d9;
}
input.empty + span {
 top: 50%;
 transform: translateY(-50%);
  font-size: 1em;
  background: none;
  color: #cccccc;
}
body {
  display: flex;
  min-height: 100vh;
  background: #f1f1f1;
  font-family: 'Lato', sans-serif;
  font-size: 150%;
}
form {
  margin: auto;
}
 
input, button {
  padding: 15px 20px;
  border-radius: 1px;
  border: 2px solid #bdbdbd;
}
 
button {
  border-color: #363636;
  background: #363636;
  color: #FFFFFF;
}

Et enfin, écrivez le code JavaScript :

$('input:empty, textarea:empty').addClass('empty');
$('input').keyup(function() {
  if ($(this).val().trim() !== '') {
    $(this).removeClass('empty');
  } else {
    $(this).addClass('empty');
  }
});

Production:

Vous pouvez implémenter plusieurs effets lorsque vous utilisez des libellés d’entrée flottants dans HTML5, tels que :

• Ajoutez des icônes avec un effet de fondu entrant/sortant lors de la validation d’un formulaire HTML5.
• Secouez l’entrée si les données saisies ne sont pas valides.
• Atténuez la couleur des entrées lorsqu’elles sont remplies correctement.

Choses à considérer

Lorsque vous travaillez sur la mise en œuvre de validations dans un formulaire HTML5, vous devez vous familiariser avec :

1. Prise en charge du navigateur: les formulaires HTML5 fonctionnent parfaitement dans les navigateurs modernes et IE10+. Bien que la version 9 d’IE et les versions antérieures ne prennent pas en charge les pseudo-sélecteurs de validation vous empêchant de styliser le formulaire, il fonctionnera toujours correctement.
2. Avertissement: Une chose que vous ne pouvez pas effectuer lors de l’application de validations à un formulaire HTML5 est le style des messages de validation. En effet, une telle fonctionnalité est désactivée par les navigateurs.

Derniers mots

La mise en œuvre de validations dans un formulaire est cruciale pour ajouter une couche de sécurité supplémentaire à votre site. En effet, cela empêche les utilisateurs malveillants d’ajouter du texte malveillant comme valeur dans les champs de votre formulaire. En outre, fournir des commentaires instantanés aux utilisateurs lorsqu’ils saisissent une entrée dans un champ de saisie validée du formulaire contribuera à améliorer leur expérience. Après tout, ils n’auront pas à passer du temps à reconnaître qu’ils ont fait une erreur en remplissant le formulaire. Mais valider un formulaire en utilisant uniquement JavaScript peut être difficile. C’est là que la validation de formulaire HTML5 vient à votre secours.

Lorsque vous appliquez des validations à un formulaire à l’aide de HTML5, vous n’avez pas besoin d’écrire de longues lignes de code JS complexe. Au lieu de cela, vous pouvez implémenter des règles de validation de formulaire avec un codage JavaScript minimal. Plus important encore, de nombreuses nouvelles fonctionnalités sont disponibles avec la validation de formulaire HTML5, telles que l’étiquette d’entrée flottante qui donne à un formulaire un aspect magnifique, encourageant les utilisateurs à effectuer la soumission du formulaire.