1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Validation d'un formulaire en temps réel (oblige l'utilisateur a completer d'une certaine maniere certains champs)

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

0/5 (2 avis)

Snippet vu 14 793 fois - Téléchargée 29 fois

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

Ajouter un commentaire Commentaires
sebmafate Messages postés 4936 Date d'inscription lundi 17 février 2003 Statut Membre Dernière intervention 14 février 2014 36
12 sept. 2005 à 14:05
c'est surtout plus robuste les regex
Phil_Free Messages postés 275 Date d'inscription samedi 4 juin 2005 Statut Membre Dernière intervention 28 avril 2006 11
12 sept. 2005 à 10:42
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;
}
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)