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,textpour un champ de texte simple,passwordpour un mot de passe,emailpour une adresse e-mail, etc. - Utilisez l’attribut
namepour donner un nom au champ, qui sera utilisé pour identifier les données soumises. - Ajoutez un attribut
idpour une identification unique du champ. - Vous pouvez également ajouter des attributs tels que
placeholderpour fournir un exemple de ce qui doit être saisi,requiredpour exiger la saisie du champ, etvaluepour 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éeest de typedate, 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.
Autres articles
