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>
Copier après la connexion
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>
Copier après la connexion
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>
Copier après la connexion
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>
Copier après la connexion
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
< /p>
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>
Copier après la connexion
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
