Formulaires JavaScript
Validation de formulaire JavaScript
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 :
Exemple JavaScript
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 :
Exemple de formulaire HTML
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
JavaScript peut valider une entrée numérique
JavaScript est souvent utilisé pour valider une entrée numérique :
Veuillez saisir un nombre entre 1 et 10
Validation automatique des formulaires HTML
La validation du formulaire HTML peut être effectuée automatiquement par le navigateur :
Si un champ de formulaire (fname) est vide, l' requiredattribut empêche la soumission de ce formulaire :
Exemple de formulaire HTML
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
La validation automatique des formulaires HTML ne fonctionne pas dans Internet Explorer 9 ou version antérieure.
La validation des données
La validation des données est le processus qui garantit que les entrées de l'utilisateur sont propres, correctes et utiles.
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 entrée utilisateur correcte.
La validation peut être définie par de nombreuses méthodes différentes et déployée de différentes manières.
La validation côté serveur est effectuée par un serveur Web, après que l'entrée a été envoyée au serveur.
La validation côté client est effectuée par un navigateur Web, avant que l'entrée ne soit envoyée à un serveur Web.
Validation des contraintes HTML
HTML5 a introduit un nouveau concept de validation HTML appelé validation de contraintes .
La validation des contraintes HTML est basée sur :
- Validation des contraintes Attributs d'entrée HTML
- Validation des contraintes CSS Pseudo Sélecteurs
- Validation des contraintes Propriétés et méthodes DOM
Attributs d'entrée HTML de validation de contrainte
| Attribute | Description |
|---|---|
| disabled | Specifies that the input element should be disabled |
| max | Specifies the maximum value of an input element |
| min | Specifies the minimum value of an input element |
| pattern | Specifies the value pattern of an input element |
| required | Specifies that the input field requires an element |
| type | Specifies the type of an input element |
Pour une liste complète, accédez à Attributs d'entrée HTML .
Validation des contraintes CSS Pseudo Sélecteurs
| Selector | Description |
|---|---|
| :disabled | Selects input elements with the "disabled" attribute specified |
| :invalid | Selects input elements with invalid values |
| :optional | Selects input elements with no "required" attribute specified |
| :required | Selects input elements with the "required" attribute specified |
| :valid | Selects input elements with valid values |
Pour une liste complète, allez à CSS Pseudo Classes .