Présentation de la validation des formulaires HTML
Les formulaires Web sont souvent la partie la plus utilisée et la plus essentielle des applications Web. La validation du formulaire est le processus de validation des données saisies par l'utilisateur par rapport aux règles prédéfinies. La validation du formulaire peut avoir lieu soit côté client, soit côté serveur. La validation du formulaire HTML est la forme de validation côté client où la validation des données sera effectuée avant d'envoyer les données au serveur. La validation des formulaires HTML est importante et utile car elle améliore l'interface utilisateur côté client et les performances de l'application Web.
Validation de formulaire HTML
Il existe principalement deux façons de valider un formulaire HTML,
- Utilisation de la fonctionnalité intégrée HTML5
- Utiliser JavaScript
1. Utilisation de la fonctionnalité intégrée HTML5
HTML5 fournit cette fonctionnalité de validation de formulaire sans utiliser JavaScript. Les éléments de formulaire auront des attributs de validation ajoutés, ce qui nous permettra de valider automatiquement le 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 restreindre 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 et poursuivrons ensuite la validation de formulaire HTML à l'aide de JavaScript.
Exemple
Validation de formulaire à l'aide de l'attribut de validation HTML5 - Dans cet exemple, nous utiliserons la balise de validation de formulaire requise, ce qui entraînera la saisie obligatoire des données de ce champ, sinon le formulaire ne sera pas soumis. Ci-dessous est l'extrait de code pour la même chose avec un certain style d'un formulaire Web.
.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;
)
Name:
Nous avons donc un formulaire Web très simple avec un seul champ de données d'entrée 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 entrer de valeur dans le champ du nom. Lors de la soumission, vous obtiendrez le message d'erreur sous la forme «Veuillez remplir ce champ» et le formulaire ne sera pas envoyé.
Sortie avec des données vierges
On peut donc voir que le message d'erreur n'est pas ajouté par nous et est fourni par HTML lui-même.
Tout comme l'attribut requis fourni par HTML, il existe différentes balises de formulaire disponibles. Voici 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 régulière
2. Utilisation de JavaScript
JavaScript est largement utilisé pour la validation des formulaires HTML car il offre plus de façons de personnaliser et de définir les règles de validation, et certaines des 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, nous définissons fondamentalement des fonctions pour valider les données avant de les soumettre au serveur. Nous pouvons implémenter n'importe quelle logique requise pour atteindre les règles de validation. JavaScript est plus flexible de cette manière car il n'y a aucune restriction sur la définition des règles. Mais il est nécessaire d'avoir une connaissance de JavaScript pour l'implémenter par rapport à la validation de formulaire à l'aide de balises intégrées.
Voyons l'exemple de la 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 name.
Exemple:
.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;
)
Name:
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;
)
)
Dans 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 de formulaire. Comme mentionné précédemment, nous allons écrire une fonction de validation pour laquelle la balise est ajoutée.
Nous avons écrit une fonction nommée validateForm () qui fera la validation. Nous mettons en œuvre la même règle de vérification si les données saisies dans le champ de nom sont vides ou non. La logique pour vérifier ceci est sur un clic du bouton soumettre, cette fonction sera appelée et la valeur entrée sera vérifiée si elle est nulle ou vide. La fonction renverra true si les données ne sont pas nulles ou vides, mais si les données sont vides ou nulles, le message d'erreur s'affiche à l'utilisateur.
Production
Si nous essayons de soumettre le formulaire sans entrer de données, nous devrions afficher le message d'erreur à l'écran. Comme le montre l'exemple que nous avons conçu le message d'erreur de la même manière que possible.
Sortie avec des données vierges
Conclusion - Validation du formulaire HTML
Nous avons donc vu un exemple très simple de validation de formulaire côté client. Il existe principalement deux façons d'effectuer la validation de formulaire HTML. La première consiste à utiliser la fonctionnalité intégrée fournie dans HTML5 et la seconde à utiliser JavaScript. En utilisant la première méthode, nous n'avons pas besoin d'écrire de code supplémentaire.
Articles recommandés
Cela a été un guide pour la validation des formulaires HTML. Ici, nous discutons de l'aperçu et de deux façons de validation de formulaire HTML par lesquelles ils peuvent être effectués. Vous pouvez également consulter les articles suivants pour en savoir plus -
- Événements HTML
- Versions de Html
- Éléments HTML5
- Applications du HTML