25. Formulaires et validation des données avec Javascript

Página 75

Les formulaires constituent un élément essentiel de toute application Web. Ils constituent l'interface principale entre l'utilisateur et le serveur, permettant aux utilisateurs de saisir des données qui seront envoyées au serveur pour traitement. Cependant, avant de soumettre ces données, il est crucial de s’assurer qu’elles sont valides. C'est là qu'intervient la validation des données avec Javascript.

JavaScript propose plusieurs façons de valider les données du formulaire avant qu'elles ne soient envoyées au serveur. Ceci est important car cela permet de garantir que les données envoyées au serveur sont exactes et complètes, ce qui peut permettre d'économiser un temps de traitement et des ressources précieux.

Validation de formulaire avec JavaScript

La validation de formulaire avec JavaScript implique généralement l'utilisation d'événements et de fonctions. Un événement est quelque chose qui se produit sur la page, comme un clic ou une pression sur une touche. Une fonction est un bloc de code qui est exécuté lorsqu'elle est appelée.

Par exemple, vous pouvez utiliser l'événement « onsubmit » pour appeler une fonction de validation lorsque l'utilisateur tente de soumettre le formulaire. Cette fonction de validation peut ensuite vérifier chaque champ du formulaire pour s'assurer qu'il répond à certains critères.

Voici un exemple de la façon dont vous pouvez procéder :

<form id="myForm" onsubmit="return validateForm()">
  <input type="text" id="nom" name="nom">
  <input type="soumettre" value="Soumettre">
</formulaire>

<script>
fonction validateForm() {
  var x = document.forms["myForm"]["name"].value;
  si (x == "") {
    alert("Le nom doit être renseigné");
    renvoie faux ;
  }
}
</script>

Dans l'exemple ci-dessus, la fonction validateForm() est appelée lorsque le formulaire est soumis. Il vérifie si le champ "nom" est vide. S'il est vide, il affiche une alerte et empêche la soumission du formulaire.

Validation du type de données

En plus de vérifier si un champ est vide, vous souhaiterez peut-être également vérifier si les données que vous saisissez sont du type correct. Par exemple, si vous disposez d'un champ dans lequel les utilisateurs doivent saisir un nombre, vous pouvez utiliser la fonction isNaN() de JavaScript pour vérifier si la valeur saisie est réellement un nombre.

<form id="myForm" onsubmit="return validateForm()">
  <input type="text" id="numéro" name="numéro">
  <input type="soumettre" value="Soumettre">
</formulaire>

<script>
fonction validateForm() {
  var x = document.forms["myForm"]["number"].value;
  si (estNaN(x)) {
    alert("Doit saisir des chiffres");
    renvoie faux ;
  }
}
</script>

Dans l'exemple ci-dessus, la fonction validateForm() vérifie si la valeur saisie dans le champ "numéro" est un nombre. S'il ne s'agit pas d'un numéro, il affiche une alerte et empêche la soumission du formulaire.

Validation du format des données

Vous souhaiterez peut-être également vérifier que les données que vous saisissez sont dans le format correct. Par exemple, si vous disposez d'un champ dans lequel les utilisateurs doivent saisir une adresse e-mail, vous pouvez utiliser une expression régulière pour vérifier si la valeur saisie ressemble à une adresse e-mail.

<form id="myForm" onsubmit="return validateForm()">
  <input type="text" id="email" name="email">
  <input type="soumettre" value="Soumettre">
</formulaire>

<script>
fonction validateForm() {
  var x = document.forms["myForm"]["email"].value;
  var atpos = x.indexOf("@");
  var dotpos = x.lastIndexOf(".");
  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
    alert("Adresse e-mail non valide");
    renvoie faux ;
  }
}
</script>

Dans l'exemple ci-dessus, la fonction validateForm() vérifie si la valeur saisie dans le champ « email » ressemble à une adresse email. S'il ne ressemble pas à une adresse e-mail, il affiche une alerte et empêche l'envoi du formulaire.

Ce ne sont là que quelques exemples de la manière dont vous pouvez utiliser JavaScript pour valider les données d'un formulaire. La validation des données est une partie cruciale du développement d'applications Web, et JavaScript offre de nombreux outils puissants pour vous aider à le faire efficacement.

Page suivante de lebook gratuit :

7626. Introduction à jQuery