Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

VALIDATION D'UN FORMULAIRE EN TEMPS RÉEL (OBLIGE L'UTILISATEUR A COMPLETER D'UNE CERTAINE MANIERE CERTAINS CHAMPS)


Information sur la source

Catégorie :Formulaire Classé sous : formulaire, validation Niveau : Débutant Date de création : 12/09/2005 Vu : 6 197

Note :
7,4 / 10 - par 5 personnes
7,40 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (2)
Ajouter un commentaire et/ou une note

Description

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

  • <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>
<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 !
 

Commentaires et avis

signaler à un administrateur
Commentaire de Phil_Free le 12/09/2005 10:42:26

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;
    }

signaler à un administrateur
Commentaire de sebmafate le 12/09/2005 14:05:00 administrateur CS

c'est surtout plus robuste les regex

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

nouvelle page après validation d'un formulaire [ par nicopico ] Bonjour,J'ai créé un formulaire (avec un mailto) qui contient un bonton de validation sur lequel je vérifie les différents champs sur l'évènement "onC bouton de validation d'un formulaire dans une frame séparée [ par carla ] Carla J'ai un formulaire dont je dois à la fois récupérer les données et imprimer ; pour que le bouton submit ne soit pas imprimé, je veux le Validation formulaire paralysée... pourquoi ??? [ par pyranhaz ] Bonjour,J'utilise depuis 2 ans le script de validation de formulaire ci-dessous (emprunter à Frontpage) et voilaà que je fais des changements (comme à Validation formulaire 'automatique' [ par tryoruda ] SalutJe souhaite qu'un formulaire HTML soit automatiquement validé lorque l'utilisateur a rempli tous les champs (sans cliquez sur un bouton submit).J Forcer la validation du formulaire [ par cybernul ] Bonjour,J'ai créer un formulaire qui pointe vers une boite mail extérieur dans laquel, j'ai déjà inscrit mon login et mon password mais pour gagner en Validation/annulation FORMULAIRE [ par ctof3552 ] Salut!une petite question de debutant...J'ai un formulaire sur lequel je veux mettre 2 bouton-images (2 .gif) qui servent à la validation, un pour enr fermer un formulaire à la validation? [ par mousse83 ] j'ai un formulaire dans un popup qui une fois validé ouvre un autre popup de remerciements mais le formulaire ne se ferme pas...je ne sait pas ce qu'i Validation d'un formulaire avec la touche entrée [ par hchtot ] Bonjour,J'ai un formulaire classique avec un bouton de validation de type button et onclick="verif()".Ma fonction verif() est la suivante:function ver open.window à la validation d'un formaulaire [ par mfaraday ] Bonjour,Je voudrais savoir si il est possible de mettre du javacript à la validation d'un formulaire. Je m'explique :Peut on faire ouvrir une fenêtre validation et impression [ par shaft107 ] slt, je voudrai qu'un click sur un bouton de mon formulaire me renvoie une page formatée dans laquelle je puisse récupérer le contenu de mon formulair


Nos sponsors

Sondage...

CalendriCode

Janvier 2009
LMMJVSD
   1234
567891011
12131415161718
19202122232425
262728293031 

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,390 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.