Pseudo Mot de passe
fleche Inscription
fleche Mot de passe oublié ?
Informations Générales
Chargement en cours...
Nombre de Visites fleche [ 140482 ]
Votre IP fleche [ 38.103.63.16 ]
Vous êtes ici : Home Page Dossiers Trucs et astuces (JavaScript) Controler champs de formulaire
Imprimer Imprimer le document

Informations Membres

[195] Posts sur le forum
[177] Membres inscrits
Il y a en ligne :
  arrow 0 Membre
  arrow 3 Invités
fled Membre en ligne:
Aucun

Partenariat

Partenariat Vous pouvez aider ce site à évoluer, en contribuant à son développement. Proposez vos idées de cours et/ou dossiers. Rendez-vous dans « Partenariat » pour en savoir plus.

Nom de domaine

www.

Partenaires

Alsacreations
L'éditeur JavaScript
WebRankInfo
DicoDuNet
Noogle

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.

Nom :
Mail : 
<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 (code de couleur noir).

Nom :
Mail : 
<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) commentaires - Voir/EditerAjout commentaire

Haut de page