Validation du formulaire JavaScript


Table des matières

    Afficher la table des matières


Validation du 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>

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 peut valider la saisie numérique

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> 


Validation automatique du formulaire 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 :

Exemple de formulaire HTML

<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

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.


Validation des contraintes HTML

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


Attributs d'entrée HTML de validation des contraintes

disabled

Spécifie que l'élément d'entrée doit être désactivé

max

Spécifie la valeur maximale d'un élément d'entrée

min

Spécifie la valeur minimale d'un élément d'entrée

pattern

Spécifie le modèle de valeur d'un élément d'entrée

required

Spécifie que le champ de saisie nécessite un élément

type 

Spécifie le type d'un élément d'entrée

Pour une liste complète, allez sur HTML Attributs d'entrée.


Pseudo-sélecteurs CSS de validation de contraintes

:disabled

Sélectionne les éléments d'entrée avec l'attribut "désactivé" spécifié

:invalid

Sélectionne les éléments d'entrée avec des valeurs non valides

:optional

Sélectionne les éléments d'entrée sans attribut "obligatoire" spécifié

:required

Sélectionne les éléments d'entrée avec l'attribut "obligatoire" spécifié

:valid

Sélectionne les éléments d'entrée avec des valeurs valides

Pour une liste complète, accédez à CSS Pseudo-cours.