JavaScript validation de formulaire

La validation de formulaire JavaScript

JavaScript peut être utilisé pour valider les données dans les formulaires HTML avant d'envoyer le contenu à un serveur.

Des données de formulaire qui sont généralement contrôlés par un JavaScript pourrait être:

• l'utilisateur a gauche, il fallait champs vides?
• l'utilisateur a entré une adresse e-mail?
• a l'utilisateur a entré une date valide?
• l'utilisateur a entré du texte dans un champ numérique?

---

Les champs obligatoires

La fonction ci-dessous vérifie si un champ a été laissé vide. Si le champ est vide, une boîte d'alerte avertit un message, la fonction retourne false, et la forme ne seront pas soumis:

function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}

La fonction ci-dessus pourrait être appelée quand un formulaire est soumis:

Exemple

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

Essayez vous-même »

---

E-mail de validation

La fonction ci-dessous vérifie si le contenu a la syntaxe générale d'un e-mail.

Cela signifie que les données d'entrée doit contenir le signe @ et au moins un point (.). En outre, le @ ne doit pas être le premier caractère de l'adresse e-mail, et le dernier point doit être présent après le signe @, et un minimum de 2 caractères avant la fin:

function 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("Not a valid e-mail address");
  return false;
  }
}

La fonction ci-dessus pourrait être appelée quand un formulaire est soumis:

Exemple

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>

Essayez vous-même »