Maison > interface Web > js tutoriel > Comment puis-je personnaliser les messages de validation dans les formulaires HTML ?

Comment puis-je personnaliser les messages de validation dans les formulaires HTML ?

Barbara Streisand
Libérer: 2024-12-19 05:31:13
original
980 Les gens l'ont consulté

How Can I Customize Validation Messages in HTML Forms?

Messages de validation personnalisés pour les formulaires HTML

Dans un formulaire HTML, lorsqu'un champ OBLIGATOIRE est laissé vide, un message par défaut apparaît généralement disant "Veuillez remplissez ce champ." Cela peut être personnalisé pour fournir un message d'erreur plus spécifique et plus convivial.

Modification du message d'erreur par défaut

Pour modifier le message d'erreur par défaut, utilisez ThesetCustomValidity() méthode. Par exemple, pour définir le message d'erreur d'un champ de saisie avec l'identifiant « nom d'utilisateur » sur « Ce champ ne peut pas être laissé vide », ajoutez le code suivant :

<input type="text">
Copier après la connexion

Masquer le message d'erreur

Une fois que l'utilisateur a saisi les données dans le champ, le message d'erreur doit être masqué. Cela peut être fait en définissant le message d'erreur sur "" à l'aide du gestionnaire d'événements oninput :

oninput="this.setCustomValidity('')"
Copier après la connexion

Remarque : Le mot-clé "this" n'est pas requis pour les gestionnaires d'événements en ligne mais peut être utilisé par souci de cohérence.

Exemple

Le code suivant démontre l'utilisation ofsetCustomValidity() pour fournir un message d'erreur personnalisé et le masquer lorsque l'utilisateur saisit de nouvelles données :

<form>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal