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
Barbara Streisandoriginal
2024-12-19 05:31:13981parcourir

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">

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('')"

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>

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!

Déclaration:
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