begin process at 2012 05 28 11:45:08
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Formulaire

 > 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)


 Information sur la source

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

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

Auteur : glork

Ecrire un message privé
Site perso
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 !


 Sources du même auteur

CHANGER DYNAMIQUEMENT LA COULEUR DES SCROLLBARS DANS IE
Source avec Zip CHANGER LA PLACE DES RANGÉS DANS UN TABLEAU
Source avec Zip EDITEUR WYSIWYG DANS UNE PAGE WEB !
Source avec Zip CHANGER LA COULEUR DE LA PAGE
Source avec Zip SOLITAIRE

 Sources de la même categorie

Source avec Zip Source avec une capture FORMULAIRE TABLEAU par vic511
Source avec Zip Source avec une capture FORMULAIRE DYNAMIQUE par Niidhogg
Source avec Zip Source avec une capture CONTRAINTE DE SAISIE SUR CHAMPS INPUT par ryosama
SELECTS DÉPENDANTS PRÉ-CHARGÉS D'UNE SEULE OPTION par phm
Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture FORMULAIRE TABLEAU par vic511
Source avec Zip Source avec une capture FORMULAIRE DYNAMIQUE par Niidhogg
Source avec une capture FORMULAIRE D'INSCRIPTION+VÉRIFICATION par ellissss
Source avec Zip SYSTÈME D'UPLOAD DE FICHIER SANS RECHARGEMENT DE LA PAGE. par theptitprince
PETIT SCRIPT MAIS EFFICACE POUR VALIDER LES DATES par slash135

Commentaires et avis

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

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...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,685 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales