Maison >interface Web >tutoriel HTML >Validation du formulaire HTML
Validation du formulaire HTML
- WBOYoriginal
- 2024-09-04 16:44:321339parcourir
La validation du formulaire HTML est un processus d'examen du contenu de la page du formulaire HTML pour éviter que des données erronées ne soient envoyées au serveur. Ce processus constitue une étape importante dans le développement d'applications Web basées sur HTML, car il peut facilement améliorer la qualité de la page Web ou de l'application Web. Il existe deux façons d'effectuer la validation du formulaire HTML : en utilisant la fonctionnalité intégrée HTML5 et en utilisant JavaScript.
Validation du formulaire HTML
Il existe principalement deux manières de valider un formulaire HTML :
- Utilisation des fonctionnalités intégrées HTML5
- Utiliser JavaScript
1. Utilisation de la fonctionnalité HTML5 intégrée
HTML5 fournit cette fonctionnalité de validation de formulaire sans utiliser JavaScript. Les éléments du formulaire auront des attributs de validation ajoutés, ce qui permettra la validation automatique du formulaire. Les attributs de validation nous permettent de spécifier différents types de règles sur nos éléments de formulaire. Ils nous permettent de définir la longueur des données, de définir une restriction sur les valeurs des données, etc.
Voyons un exemple simple de validation de formulaire HTML à l'aide d'éléments de validation de formulaire intégrés, puis nous passerons à la validation de formulaire HTML à l'aide de JavaScript.
Exemple
Validation du formulaire à l'aide de l'attribut de validation HTML5 – Dans cet exemple, nous utiliserons la balise de validation du formulaire requise, ce qui rendra obligatoire la saisie des données dans ce champ ; sinon, le formulaire ne sera pas soumis. Vous trouverez ci-dessous l'extrait de code correspondant, ainsi qu'un aperçu du style d'un formulaire Web.
<!DOCTYPE html>
<html>
<head>
<style>
.formData {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
}
form {
font-size: 30px;
}
form input {
margin-left: 10px;
font-size: 15px;
}
</style>
</head>
<body>
<div class = "formData" >
<form action = "#" >
Name: <input type = "text" name = "name" required>
<input type = "submit" >
</form>
</div>
</body>
</html>
Nous avons donc un formulaire Web très simple avec un seul champ de données de saisie comme « Nom ». Veuillez noter que nous avons utilisé le mot-clé requis dans l'élément de balise d'entrée.
Sortie :
Essayons de soumettre le formulaire sans saisir de valeur dans le champ du nom. Lors de la soumission, vous recevrez le message d'erreur « Veuillez remplir ce champ » et le formulaire ne sera pas soumis.
Sortie avec des données vides :
On peut donc voir que le message d'erreur n'est pas ajouté par nous et est fourni par HTML lui-même.
Comme l'attribut obligatoire fourni par HTML, différentes balises de formulaire peuvent être utilisées. Ci-dessous la liste de quelques balises de validation de formulaire,
- minlength : Utilisé pour définir la longueur minimale requise d'un élément
- maxlength : Utilisé pour définir la longueur maximale requise d'un élément
- modèle : Utilisé pour définir une expression regex
2. Utiliser JavaScript
JavaScript est largement utilisé pour la validation des formulaires HTML car il offre davantage de moyens de personnaliser et de définir les règles de validation ; de plus, certaines balises fournies en HTML5 ne sont pas prises en charge dans les anciennes versions d'Internet Explorer. JavaScript est utilisé depuis longtemps pour la validation des formulaires.
Dans la validation de formulaire JavaScript, en gros, nous définissons des fonctions pour valider les données avant de les soumettre au serveur. Nous pouvons implémenter toute logique requise pour respecter les règles de validation. JavaScript est ainsi plus flexible car il n'y a aucune restriction sur la définition de règles. Mais il est nécessaire de connaître JavaScript pour mettre en œuvre cela par rapport à la validation de formulaire à l'aide de balises intégrées.
Voyons l'exemple de validation de formulaire à l'aide de JavaScript. Nous allons implémenter le même exemple de formulaire avec une seule entrée comme élément de nom.
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
.formData {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
position: absolute;
width: 100%;
}
form {
font-size: 30px;
}
form input {
margin-left: 10px;
font-size: 15px;
}
.errorMessage {
background-color: white;
width: 143px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 107px;
visibility: hidden;
border-radius: 10px;
position: relative;
float: left;
}
.errorMessage.top-arrow:after {
content: " ";
position: absolute;
right: 90px;
top: -15px;
border-top: none;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 15px solid white;
}
</style>
</head>
<body>
<div class = "formData" >
<form name = "simpleForm" action = "#" onsubmit = "return validateForm()" >
Name: <input type = "text" name = "name">
<input type = "submit" >
</form>
<p class = "errorMessage top-arrow" > </p>
</div>
<script>
function validateForm() {
var nameVal = document.forms["simpleForm"]["name"].value;
if(nameVal == null || nameVal == "") {
document.getElementsByClassName( "errorMessage" )[0].style.visibility = "visible";
document.getElementsByClassName( "errorMessage" )[0].innerHTML = "Please Fill out this field";
return false;
} else {
return true;
}
}
</script>
</body>
</html>
De l'exemple précédent, nous avons supprimé la balise requise de l'élément de formulaire « nom ». Au lieu de cela, nous avons ajouté une balise onsubmit dans l’élément form. Comme mentionné précédemment, nous allons écrire une fonction de validation pour laquelle le