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

Commenter

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

S'inscrire maintenant

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.

Du même auteur (glork)