Validation d'un formulaire en temps réel (oblige l'utilisateur a completer d'une certaine maniere certains champs)

Soyez le premier à donner votre avis sur cette source.

Snippet vu 14 078 fois - Téléchargée 27 fois

Contenu du snippet

Si vous completez un des champs de facon... incorrecte, il y a une boite d'alerte qui s'affiche. Biensur, vous pouvez tout modifier, j'ai laissé quelques "commentaires" dans la source.

Source / Exemple :


<script language="javascript">
<!--
function verif(mail,pseudo,prenom,nom,age){
 if(vmail(mail)||vtexte(pseudo,'pseudo')||vtexte(prenom,'prenom')||vtexte(nom,'nom')||vnombre(age)){
   return true;
 }else{
   return false;
 }
}

function vtexte(texte,type){
 if(texte.value.length<3){
   alert('Veuillez entrer un '+type+' valide');
   return false;
 }else{
   return true;
 }
}

//test la validité d'une adresse e-mail
function vmail(mail){

   // l'adresse minimum est xx@yy.zz
   var point=mail.value.lastIndexOf('.');

   // La position du dernier point de l'adresse email
   var arob=mail.value.lastIndexOf('@');

   // La position du dernier @ de l'adresse email
   var longu=mail.value.length;

 // La longueur de l'adresse
 if((longu-point < 3) || (longu-arob) < 6 || arob > point || point == -1 || arob == -1){
   // Si le point se trouve a moins de 2 caractères de la fin
   // ou si l'arobase se trouve a moins de 5 caractères de la fin
   // ou si il n'y a pas de point après @
   // ou si il n'y a pas de point ou pas de @
   alert('Veuillez entrer une adresse email valide');
   return false;
 }else{
   return true;
 }
}

function vnombre(champ){
 if(isNaN(champ.value)||champ.value<5||champ.value>99){
 // si ce n'est pas un nombre ou qu'il est inférieur a 5 ou superieur a 99
   alert('Veuillez entrer un age valide');
   return false;
 }else{
   return true;
 }
}
//-->
</script>

</head>

<body>
<form name="verifier" method="post" enctype="text/plain" action="mailto:xxx@yyy.zzz" onSubmit="return verif(document.verifier.email,document.verifier.pseudo,document.verifier.prenom,document.verifier.nom,document.verifier.age)">
<p>Votre adresse email : <input type="text" name="email" onBlur="vmail(this)">
</p>

<p>Votre pseudo : <input type="text" name="pseudo" onBlur="vtexte(this,'pseudo')"><br>
Votre prénom : <input type="text" name="prenom" onBlur="vtexte(this,'prénom')"><br>
Votre nom : <input type="text" name="nom" onBlur="vtexte(this,'nom')"></p>

<p>Votre age : <input type="text" name="age" onBlur="vnombre(this)"></p>

<p><input type="submit" value="valider"> <input type="reset" value="RaZ"></p>
</form>
</body>

Conclusion :


Pas tres beau comme design mais... pas grave ! :)
Testé sur Firefox et MSIE. Marche sur tous les deux !

A voir également

Ajouter un commentaire Commentaires
Messages postés
4936
Date d'inscription
lundi 17 février 2003
Statut
Modérateur
Dernière intervention
14 février 2014
34
c'est surtout plus robuste les regex
Messages postés
275
Date d'inscription
samedi 4 juin 2005
Statut
Membre
Dernière intervention
28 avril 2006
8
Salut !

Concernant le test d'une adresse e-mail, je te propose ceci, basé sur l'expression régulière dédiée aux contrôle des e-mails, qui est plus court et surtout bien plus efficace:

function vmail(mail){
var email = mail;
var modele = /^[a-z0-9\-_\.]+@[a-z0-9]+\.[a-z]{2,5}$/i;
if (modele.test(email))
return true;
else
alert("Votre adresse email est invalide !");
return false;
}

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.