La validation du formulaire HTML peut être effectuée par JavaScript.
Si un champ de formulaire (fname) est vide, cette fonction alerte un message et renvoie false, pour empêcher la soumission du formulaire :
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
La fonction peut être appelée lorsque le formulaire est soumis :
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
JavaScript est souvent utilisé pour valider la saisie numérique :
Veuillez saisir un nombre entre 1 et 10
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Validation</h2>
<p>Please input a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
// Get the value of the input field with id="numb"
let x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
let text;
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
La validation du formulaire HTML peut être effectuée automatiquement par le navigateur :
Si un champ de formulaire (fname) est vide, l'attribut required
empêche ce formulaire d'être soumis :
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Validation</h2>
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
<p>If you click submit, without filling out the text field,
your browser will display an error message.</p>
</body>
</html>
La validation automatique des formulaires HTML ne fonctionne pas dans Internet Explorer 9 ou version antérieure.
La validation des données est le processus permettant de garantir que la saisie de l'utilisateur est propre, correct et utile.
Les tâches de validation typiques sont :
l'utilisateur a-t-il rempli tous les champs obligatoires ?
l'utilisateur a-t-il saisi une date valide ?
l'utilisateur a-t-il saisi du texte dans un champ numérique ?
Le plus souvent, le but de la validation des données est de garantir une saisie correcte par l'utilisateur.
La validation peut être définie par de nombreuses méthodes différentes et déployée dans de nombreux différentes façons.
La validation côté serveur est effectuée par un serveur Web, une fois que les données ont été envoyées au serveur.
La validation côté client est effectuée par un navigateur Web, avant que les entrées ne soient envoyées à un serveur Web.
HTML5 a introduit un nouveau concept de validation HTML appelé contrainte validation.
La validation des contraintes HTML est basée sur :
Validation des contraintes HTML Attributs d'entrée
Validation des contraintes Pseudo-sélecteurs CSS
Validation des contraintes Propriétés et méthodes DOM
Spécifie que l'élément d'entrée doit être désactivé
Spécifie la valeur maximale d'un élément d'entrée
Spécifie la valeur minimale d'un élément d'entrée
Spécifie le modèle de valeur d'un élément d'entrée
Spécifie que le champ de saisie nécessite un élément
Spécifie le type d'un élément d'entrée
Pour une liste complète, allez sur HTML Attributs d'entrée.
Sélectionne les éléments d'entrée avec l'attribut "désactivé" spécifié
Sélectionne les éléments d'entrée avec des valeurs non valides
Sélectionne les éléments d'entrée sans attribut "obligatoire" spécifié
Sélectionne les éléments d'entrée avec l'attribut "obligatoire" spécifié
Sélectionne les éléments d'entrée avec des valeurs valides
Pour une liste complète, accédez à CSS Pseudo-cours.