Personnalisation des messages de validation de formulaire HTML
Lors de la soumission de formulaires avec des champs vides ou invalides, les navigateurs affichent généralement des messages d'erreur génériques. Pour améliorer l’expérience utilisateur, la personnalisation de ces messages est essentielle. Cette question explore comment modifier les messages de validation par défaut dans les formulaires HTML, notamment pour les champs vides et le champ de saisie du mot de passe.
Solution :
Pour afficher un message d'erreur personnalisé pour un champ de saisie vide, utilisez le code suivant :
<input type="text" required placeholder="Enter Name" oninvalid="this.setCustomValidity('Enter User Name Here')" oninput="this.setCustomValidity('')"/>
Le composant clé est la méthode setCustomValidity(), qui définit un message de validation personnalisé pour l'élément. Lorsque l'entrée n'est pas valide (par exemple, vide), elle affiche le message personnalisé. Le gestionnaire d'événements oninput supprime le message personnalisé lorsque l'utilisateur saisit de nouvelles données, améliorant ainsi l'interaction de l'utilisateur.
Pour les champs de mot de passe, dont le message d'erreur par défaut est une séquence d'astérisques, vous pouvez exploiter la même méthode setCustomValidity(). En définissant un message d'erreur personnalisé, le navigateur affichera votre message au lieu d'astérisques.
Remarques supplémentaires :
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!