JavaScript - Contrôler les champs d'un formulaire

Auteur : 3L!X | Créé le : 19/09/2007 à 14H00

Contrôler des champs de formulaire en javascript peut être utile afin de ne pas envoyer de formulaire avec des champs vide ou mal rempli. De cette façon chaque champs seront vérifiés en local (sur la machine client), avant d'être envoyer au serveur de traitement.

Mise en application

Prenons un exemple simple de formulaire, avec deux champs qui vont nous renseigner sur le Nom et l'adresse Mail du client.

<form action="form.html" method="get">
<table class="center">
<tr>
	<td align="right">Nom :</td><td><input type="text" name="nom" size="25" /></td>
</tr><tr>
	<td align="right">Mail :</td><td><input type="text" name="mail" size="25" /></td>
</tr><tr>
	<td colspan="2" align="right"><input type="submit" value="Envoyer" /></td>
</tr></table>
</form>

Comme vous le constater, vous pouvez envoyer le formulaire sans avoir rempli les champs.
Maintenant le but c'est d'éviter ce problème, en incluant un peu de javascript à notre formulaire.

<script type="text/javascript">
<!--
function valider(form)
{
var i = 0;
var msg = "";
var nom = form.elements['nom'].value;
var mail = form.elements['mail'].value;

if (nom.length<2 && i<1)
	{msg += "Il manque votre Nom\n";i++;}
if (mail.length<4 && i<1)
	{msg += "Il manque votre adresse Mail\n";i++;}
if (mail.search(/^[^._-][a-z0-9._-]+[^._-]@[a-z0-9._-]+([a-z0-9]+[^._-])?[.-]+[a-z]{2,4}$/)==-1 && i<1)
	{msg += "Ceci n'est pas une adresse Mail valide\n";i++;}
if (i>=1)
	{alert(msg);return false;}
return true;
}
-->
</script>

<form action="form.html" method="get" onsubmit="return valider(this)">
<table class="center">
<tr>
	<td align="right">Nom :</td><td><input type="text" name="nom" size="25" /></td>
</tr><tr>
	<td align="right">Mail :</td><td><input type="text" name="mail" size="25" /></td>
</tr><tr>
	<td colspan="2" align="right"><input type="submit" value="Envoyer" /></td>
</tr></table>
</form>

Explications

• { nom.length<2 } signifie que le nom doit être composé d'au moins 2 caractères
• { mail.length<4 } signifie que le mail doit être composé d'au moins 4 caractères
• { mail.search(/^[^._-][a-z0-9._-]+[^._-]@[a-z0-9._-]+([a-z0-9]+[^._-])?[.-]+[a-z]{2,4}$/)==-1 } signifie que le mail doit avoir une forme spécifique (xxxxx@xxx.xxx)
  Cette méthode recherche des caractères spécifiés dans le champ mail (voir expressions régulières)

[0] commentaire - Voir/Editer