Javascript

Afficher un message d’erreur à côté d’un champ de saisie en JavaScript

Dans cet article, nous allons explorer comment afficher des messages d’erreur à côté des champs de saisie en JavaScript ( JavaScript pour effectuer la validation du champ de saisie).

Conexte

Quand vous concevez des formulaires en ligne, il est crucial de donner un retour explicite en cas d’erreur lors de la saisie de données. Une méthode courante pour améliorer l’expérience utilisateur est d’afficher un message d’erreur à proximité du champ de saisie en javascript. Par exemple, si un utilisateur omet de remplir son adresse e-mail dans le champ de saisie en javascript (personnalisé), un message d’erreur pourrait apparaître à côté du champ pour l’informer de l’erreur.

Champ de saisie et son rôle dans l’expérience utilisateur (UX)

Le rôle d’un champ de saisie dans l’expérience utilisateur (UX) est de permettre à un utilisateur d’entrer des données ou des informations, telles que du texte, des nombres, ou des sélections, dans un formulaire sur un site web. Les champs de saisie sont un élément clé pour collecter des données de l’utilisateur, qu’il s’agisse d’informations personnelles, de réponses à des questions, d’informations de paiement, ou d’autres types de données.

Pour créer et personnaliser un champ de saisie en HTML/CSS, ci-après les étapes de base :

Création du champ de saisie en HTML :

Utilisez la balise <input> pour créer un champ de saisie.
Spécifiez le type de champ de saisie en utilisant l’attribut type. Par exemple, text pour un champ de texte simple, password pour un mot de passe, email pour une adresse e-mail, etc.
Utilisez l’attribut name pour donner un nom au champ, qui sera utilisé pour identifier les données soumises.
Ajoutez un attribut id pour une identification unique du champ.
Vous pouvez également ajouter des attributs tels que placeholder pour fournir un exemple de ce qui doit être saisi, required pour exiger la saisie du champ, et value pour pré-remplir le champ si nécessaire.

Exemple de code HTML pour un champ de texte :

<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" placeholder="Entrez votre nom" required>

Personnalisation du champ de saisie en CSS :

Vous pouvez personnaliser l’apparence du champ de saisie en utilisant des règles CSS pour le cibler par son id ou son name. Voici quelques propriétés CSS courantes pour personnaliser un champ de saisie :

#nom {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

#nom:focus {
  border-color: #007bff; /* Changement de style lorsque le champ est sélectionné */}

Les règles CSS ci-dessus définissent la largeur, le remplissage (padding), la bordure, le rayon des coins (border-radius) et la taille de la police du champ de saisie. La deuxième règle s’applique lorsque le champ est sélectionné (focus).

En personnalisant les propriétés CSS, vous pouvez ajuster l’apparence et le style du champ de saisie pour l’adapter à la conception de votre site web, améliorant ainsi l’expérience utilisateur.

Le champ de saisie en javascript

JavaScript est un langage de programmation essentiel pour ajouter des fonctionnalités interactives et dynamiques à un formulaire web. Voici un exemple du rôle de JavaScript dans un code de champ de saisie :

Supposons que vous ayez un formulaire de création de compte où les utilisateurs doivent saisir un nom d’utilisateur. Vous voulez vous assurer que le nom d’utilisateur est unique avant de permettre à l’utilisateur de soumettre le formulaire. Vous utilisez JavaScript pour effectuer une vérification en temps réel lorsque l’utilisateur entre un nom d’utilisateur.

<!DOCTYPE html>
<html>
<head>
    <title>Vérification du nom d'utilisateur</title>
    <script>
        // Fonction pour vérifier la disponibilité du nom d'utilisateur
        function checkUsernameAvailability() {
            var username = document.getElementById("username").value;
            var availabilityMessage = document.getElementById("availabilityMessage");

            // Exemple simplifié : vérification de disponibilité côté client
            if (username === "utilisateur1") {
                availabilityMessage.innerHTML = "Ce nom d'utilisateur n'est pas disponible.";
                availabilityMessage.style.color = "red";
            } else {
                availabilityMessage.innerHTML = "Nom d'utilisateur disponible.";
                availabilityMessage.style.color = "green";
            }
        }
    </script>
</head>
<body>
    <label for="username">Nom d'utilisateur :</label>
    <input type="text" id="username" name="username" onkeyup="checkUsernameAvailability()">
    <span id="availabilityMessage"></span>
</body>
</html>

Dans cet exemple :

Nous avons un champ de saisie où les utilisateurs entrent un nom d’utilisateur.
Nous utilisons JavaScript pour vérifier la disponibilité du nom d’utilisateur en temps réel à chaque fois que l’utilisateur tape une touche (onkeyup).
La fonction checkUsernameAvailability() récupère la valeur du champ de saisie, effectue une vérification simplifiée côté client, puis affiche un message indiquant si le nom d’utilisateur est disponible ou non.
Le message est affiché sous le champ de saisie et son style (couleur du texte) est modifié en fonction du résultat de la vérification.

JavaScript permet d’améliorer l’expérience utilisateur en fournissant des commentaires en temps réel, ce qui peut aider les utilisateurs à remplir le formulaire correctement et réduire les erreurs. Pour une vérification plus complexe et sécurisée, une vérification côté serveur serait nécessaire.

Afficher un message d’erreur à côté d’un champ de saisie en JavaScript

1. La structure HTML

Pour commencer, nous allons créer la structure HTML de base pour notre formulaire. Nous aurons un champ de saisie pour l’exemple :

<form>
  <label for="nom">Nom :</label>
  <input type="text" id="nom" name="nom">
  <span id="messageErreur"></span>
  <button type="submit">Envoyer</button>
</form>

Dans cet exemple, nous avons un champ de saisie pour le nom et un élément <span> vide avec l’ID “messageErreur” qui sera utilisé pour afficher le message d’erreur.

2. JavaScript pour la validation

Nous allons utiliser JavaScript pour effectuer la validation du champ de saisie. Voici un exemple de code JavaScript qui vérifie si le champ de saisie du nom est vide lorsque l’utilisateur tente de soumettre le formulaire :

document.querySelector('form').addEventListener('submit', function (event) {
  const nom = document.getElementById('nom').value;
  const messageErreur = document.getElementById('messageErreur');

  if (nom === '') {
    messageErreur.textContent = 'Le champ Nom ne peut pas être vide.';
    messageErreur.style.color = 'red';
    event.preventDefault(); // Empêche l'envoi du formulaire
  }
});

Dans ce code, nous utilisons addEventListener pour écouter l’événement de soumission du formulaire. Ensuite, nous vérifions si le champ de saisie “nom” est vide. Si c’est le cas, nous affichons un message d’erreur dans l’élément <span> avec l’ID “messageErreur” et nous utilisons event.preventDefault() pour empêcher l’envoi du formulaire.

3. Style CSS

Pour rendre le message d’erreur plus visible, vous pouvez ajouter quelques styles CSS. Par exemple, pour placer le message d’erreur en rouge à côté du champ de saisie, vous pouvez utiliser ces styles :

#messageErreur {
  color: red;
  font-size: 14px;
  margin-left: 10px;
}

4. Réinitialisation du message d’erreur

Il est important de réinitialiser le message d’erreur lorsque l’utilisateur corrige son entrée. Vous pouvez ajouter un gestionnaire d’événements pour effacer le message d’erreur lorsqu’un utilisateur commence à taper dans le champ de saisie :

document.getElementById('nom').addEventListener('input', function () {
  document.getElementById('messageErreur').textContent = '';
});

Ce code efface simplement le contenu de l’élément “messageErreur” lorsque l’utilisateur commence à saisir dans le champ de nom.

Cas pratique d’application

Imaginons un formulaire de réservation d’hôtel en ligne. Lorsque les utilisateurs saisissent leur date d’arrivée, vous voulez vérifier qu’elle est ultérieure à la date d’aujourd’hui. Si la date d’arrivée est antérieure à la date actuelle, vous souhaitez afficher un message d’erreur à côté du champ de saisie pour informer l’utilisateur de l’erreur. Voici le code en utilisant JavaScript :

<!DOCTYPE html>
<html>
<head>
    <title>Réservation d'hôtel</title>
    <script>
        // Fonction pour vérifier la date d'arrivée
        function checkArrivalDate() {
            var arrivalDate = new Date(document.getElementById("arrivalDate").value);
            var currentDate = new Date();
            var errorMessage = document.getElementById("errorMessage");

            if (arrivalDate < currentDate) {
                errorMessage.innerHTML = "La date d'arrivée doit être ultérieure à la date d'aujourd'hui.";
                errorMessage.style.color = "red";
            } else {
                errorMessage.innerHTML = ""; // Efface le message d'erreur
            }
        }
    </script>
</head>
<body>
    <label for="arrivalDate">Date d'arrivée :</label>
    <input type="date" id="arrivalDate" name="arrivalDate" onblur="checkArrivalDate()">
    <span id="errorMessage"></span>
</body>
</html>

Dans cet exemple :

Le champ de saisie Date d'arrivée est de type date, ce qui permet aux utilisateurs de choisir une date à partir d’un calendrier.
La fonction JavaScript checkArrivalDate() est déclenchée lorsque l’utilisateur quitte le champ de saisie (onblur). Elle compare la date d’arrivée saisie par l’utilisateur à la date actuelle (new Date()) et affiche un message d’erreur en rouge si la date d’arrivée est antérieure à la date d’aujourd’hui.
Si la date est valide, le message d’erreur s’efface, et le champ de saisie reste propre.

Ce mécanisme garantit que les utilisateurs reçoivent un feedback en temps réel sur la validité de leur date d’arrivée et contribue à améliorer l’expérience utilisateur en évitant des erreurs potentielles lors de la réservation.

Conclusion

Afficher un message d’erreur à côté d’un champ de saisie en JavaScript est une technique précieuse pour améliorer la convivialité des formulaires web. En utilisant des scripts JavaScript simples, vous pouvez guider les utilisateurs et leur fournir des informations claires en cas d’erreur. Assurez-vous de personnaliser les messages d’erreur et le style pour répondre aux besoins de votre site web.