Comment puis-je personnaliser les messages d'erreur de validation de formulaire HTML ?

Personnalisation des messages de validation pour les formulaires HTML

Lors de la validation des formulaires HTML, les messages d'erreur par défaut peuvent être peu informatifs ou prêter à confusion. Pour améliorer l'expérience utilisateur, vous pouvez personnaliser ces messages pour une interaction plus claire et plus significative.

Comment modifier les messages de validation par défaut :

L'API de validation HTML5 fournit un méthode appelée setCustomValidity(), qui vous permet de spécifier un message d'erreur personnalisé pour une saisie non valide.

Par exemple, le formulaire HTML fourni comprend des champs de saisie pour le nom d'utilisateur et le mot de passe. avec l'attribut requis. Par défaut, la soumission du formulaire avec des champs vides déclenche l'affichage par le navigateur du message « Veuillez remplir ce champ ». Pour personnaliser ce message, vous pouvez utiliser setCustomValidity() :

<input type="text">

Ici, l'attribut oninvalid est déclenché lorsque le champ de saisie n'est pas valide, définissant un message d'erreur personnalisé. L'attribut oninput est important car il réinitialise le message d'erreur lorsque l'utilisateur saisit de nouvelles données, améliorant ainsi l'expérience utilisateur.

Erreur du champ de mot de passe de personnalisation :

Dans l'exemple fourni , l'erreur par défaut du champ mot de passe est *. Cela peut être modifié en gérant la validation dans JavaScript. Voici comment :

function login() {
  let username = document.getElementById("username");
  let password = document.getElementById("pass");

  if (username.value === "" || password.value === "") {
    alert("Please fill out both fields");
    return false;
  }
}

Dans ce scénario, la soumission d'un nom d'utilisateur ou d'un mot de passe vide déclenche la fonction d'alerte, affichant un message d'erreur personnalisé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!