Maison > Article > interface Web > Attributs requis du formulaire à l'aide de messages de validation personnalisés en HTML5

Attributs requis du formulaire à l'aide de messages de validation personnalisés en HTML5

WBOYavant: 2023-08-25 10:29:15669parcourir

使用 HTML5 中的自定义验证消息形成必需属性

HTML5 inclut de nombreuses fonctionnalités de validation de formulaire intégrées, permettant aux développeurs d'ajouter facilement une validation à leurs formulaires. L'une de ces fonctionnalités est l'attribut « obligatoire », qui spécifie que le champ de saisie est obligatoire et doit être rempli avant que le formulaire puisse être soumis.

L'attribut "obligatoire" est un attribut booléen. S'il existe des champs de saisie dans le formulaire avec l'attribut « obligatoire », ce champ doit être rempli avant de soumettre le formulaire.

Si ce champ spécifique est laissé vide avant de soumettre le formulaire, l'utilisateur verra un message d'erreur dans son navigateur l'informant que ce champ de saisie est obligatoire.

Utilisez l'attribut "obligatoire"

Pour utiliser l'attribut "obligatoire", ajoutez simplement l'attribut au champ de saisie que vous souhaitez rendre obligatoire -

<html>
<body>
   <form>
      <label for="name">Name:</label>
      <input type="text" required>
   </form>
</body>
</html>

Le navigateur vérifiera que les champs de saisie sont remplis avant de soumettre le formulaire, et sinon, un message d'erreur s'affichera. Selon le navigateur, le message d'erreur par défaut peut varier, mais indiquera généralement que le champ est obligatoire.

Message de vérification personnalisé

Nous pouvons également modifier le message pour une saisie invalide en spécifiant un message unique qui sera envoyé à l'utilisateur lorsque le champ n'est pas valide. On peut changer le message de validation par défaut en utilisant l'attribut "title" -

<html>
<body>
   <form>
      <label for="name">Name:</label>
      <input type="text" id="name" required title="Please enter your name">
   </form>
</body>
</html>

Si le champ de saisie est laissé vide lors de la soumission du formulaire, ce code affichera le message « Veuillez saisir votre nom » à l'utilisateur.

Pour spécifier une expression régulière à laquelle l'entrée doit correspondre à chaque fois qu'un formulaire est rempli, HTML5 fournit l'élément "pattern" en plus de l'attribut "title", permettant aux programmeurs de spécifier une expression régulière à laquelle l'entrée doit correspondre pour être acceptée. . Si l'entrée ne correspond pas au modèle requis, l'utilisateur verra une notification d'erreur dans le navigateur

Exemple

Voici un exemple d'utilisation de l'attribut "pattern" pour spécifier la longueur minimale d'un champ de saisie -

<html>
<body>
   <form>
      <label for="name">Name:</label>
      <input type="text" required pattern=".{3,}" title="Please enter at least 3 characters">
   </form>
</body>
</html>

Si la saisie ne répond pas à ce critère, le message « Veuillez saisir au moins 3 caractères » s'affichera. Ce code nécessite que le champ de saisie contienne au moins 3 caractères.

Style de message d'erreur personnalisé

En utilisant CSS, vous pouvez modifier l'apparence des messages d'erreur. Par défaut, les messages d'erreur sont ajoutés aux champs de saisie sous forme de petits nœuds de texte et écrits en rouge. Cependant, nous pouvons modifier l'apparence du message d'erreur et contrôler son apparence à l'aide de CSS.

La pseudo-classe ":invalid" peut être utilisée pour sélectionner un champ de saisie s'il n'est pas valide, et la propriété CSS peut être utilisée pour changer le style du message d'erreur.

Exemple

Voici un exemple de personnalisation du style du message d'erreur à l'aide de CSS -

<html>
   <style>
      input:invalid {
         border: 2px solid red;
      }
      input:invalid + span {
         color: red;
         font-weight: bold;
      }
   </style>
   <body>
      <form>
         <label for="name">Name:</label>
         <input type="text" required pattern=".{3,}" title="Please enter at least 3 characters">
      </form>
   </body>
</html>

Lorsque le champ de saisie n'est pas valide, ce code deviendra rouge et affichera le message d'erreur en gras et en rouge.

Personnalisez les messages d'erreur à l'aide de JavaScript

En plus d'utiliser CSS, nous pouvons également utiliser JavaScript pour personnaliser le message d'erreur et contrôler son affichage.

Pour personnaliser le message d'erreur à l'aide de JavaScript, nous pouvons utiliser la méthode "setCustomValidity", qui nous permet de spécifier un message d'erreur personnalisé pour le champ de saisie.

Exemple

Voici un exemple de la façon de définir un message d'erreur personnalisé à l'aide de la méthode "setCustomValidity" -

<html>
<body>
   <h2>JavaScript Validation</h2>
   <p>Enter a number and click OK:</p>
   <input id="InputField" type="text" required>
   <button onclick="myFunction()">OK</button>
   <p id="demo"></p>
   <script>
      function myFunction() {
         const txt = document.getElementById("InputField").value;
         console.log(txt);
         const txtLen = txt.length;
         console.log(txtLen);
         if (txtLen<3) {
            document.getElementById("demo").innerHTML = "Must be atleast 3 characters";
         } else {
            document.getElementById("demo").innerHTML = "Input OK";
         }
      }
   </script>
</body>
</html>

Ce code définira le message d'erreur du champ de saisie sur "Veuillez saisir une valeur valide".

Conclusion

Dans cet article, nous avons vu comment combiner des messages de vérification personnalisés avec l'élément HTML5 « nécessaire ». Nous avons discuté des bases de la validation de formulaire, de la balise « nécessaire » et de la manière d'exploiter JavaScript et CSS pour personnaliser les messages de validation.

Les développeurs peuvent rapidement ajouter une validation de formulaire aux formulaires HTML5 et s'assurer que l'utilisateur a fourni les informations nécessaires en exploitant l'élément « nécessaire » et en personnalisant le message de validation. De nombreuses applications Web s'appuient sur la validation de formulaire car il s'agit d'un outil important pour garantir l'exactitude et l'exhaustivité des saisies des utilisateurs.

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!

JavaScript html5 css 正则表达式表单验证伪类

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment définir l'opacité de la bordure lors du déplacement d'un rectangle à l'aide de FabricJS ?Article suivant：Comment définir l'opacité de la bordure lors du déplacement d'un rectangle à l'aide de FabricJS ?

Articles Liés

Voir plus