[RESOLU]verification d'un formulaire

verification d'un formulaire [RESOLU] - HTML/CSS - Programmation

Marsh Posté le 06-02-2006 à 12:02:14    

bonjour tout le monde,  
 
voila j'ai un formulaire et je veux faire une verification sur la saisie de certain champs, jusque la pas de probleme,, le pb que je rencontre c'est que moment du clique sur le bouton il ne me prend pas en compte mon formulaire et fais comme si tous c'es bien passé.
 
Quand je le faisias en local tout se passais bien mais depuis que je fais mes test en ligne ca passe plus.... :heink:  
 
dans le formulaire j'ai mis ca:

Citation :

<input type="submit" name="Submit" value="Envoyer" onsubmit="validation();" />


 
validation() est ma fonction pour verifier et elle est dans un fichier js externe

Citation :

function validation()  
{    
        var email = document.formulaire.email.value;  
        if (email.search(/^[_a-z0-9-]+(.[_a-z0-9-]+)*[^._-]@[a-z0-9-]+(.[a-z0-9]{2,4})*$/) == -1)
        {  
            alert ('entrez une adresse Email valide');  
            document.formulaire.email.focus();  
            return false;  
        }  
         
else {return true;}
}


et si quelqu'un pouvait m'expliquer comment je peux faire pour ne plus avoir une fenetre alert mais un petit label qui  fait par des erreurs et les champs avec les erreurs se mettent en rouge (ca serait le petit plus mais c'est pas important)


Message édité par bedomon le 09-02-2006 à 10:01:53
Reply

Marsh Posté le 06-02-2006 à 12:02:14   

Reply

Marsh Posté le 06-02-2006 à 12:06:10    

Le onsubmit se met sur la balise form pas sur le balise input...
 
Par ailleurs as tu chargé le fichier js sur ton serveur? Tu y a mis les bons droits?

Reply

Marsh Posté le 06-02-2006 à 14:07:01    

hé bien oui le fichier est sur le serveur, j'ai fai des test pour voir si l'acces jusqu'au fichier se faisait et la dessus aucun probleme et au niveau des droits je ne sais pas je vais regardé mais je doute que cela vienne de ca

Reply

Marsh Posté le 06-02-2006 à 14:30:12    

bon j'ai verifier l'acces au fichier aucun pb, au niveau des droits rien a redire, mais il ne me prend toujous pas mon script en compte

Reply

Marsh Posté le 06-02-2006 à 14:59:47    

bon je fai des test ds tous les sens et ca m'énerveuh
 
l'entete de mon formulaire ressemble a ca:

Citation :

<form id="form1" name="formulaire" class="police" method="post" action="formMail2.asp" onsubmit="validation(this.form);">


 
formMail2.asp me permet d'envoyer les donné du formulaire dans un email
 
j'ai refait le JS avec de getElementById("id" )
 
pour mon script JS je le declare comme ca :

Citation :

<script language="javascript" src="/scripts/verification_formulaire.js" type="text/javascript"></script>


 
 :pfff: en fait le je ne sais plus quoi essayé... :pfff:  
 
siouplé :jap:

Reply

Marsh Posté le 06-02-2006 à 15:37:43    

Serait-il possible d'avoir un peu plus de description sur l'erreur?
Par exemple dans la console JS ( de IE ou FF) y'a-t-il des messages d'erreurs?
T'as pas une url pour qu'on puisse regarder?

Reply

Marsh Posté le 06-02-2006 à 15:46:11    

en fait je vien de découvrir la console js de FF
et j'ai une erreur:
document.formulaire.getElementById is not a function
 
et euh pour l'adresse c'est pas que je veux pas mais pour le moment je peux pas la données
 (restriction des patrons)

Reply

Marsh Posté le 06-02-2006 à 15:57:53    

Code :
  1. document.getElementById


faut pas rajouter formulaire au milieu...

Reply

Marsh Posté le 06-02-2006 à 16:46:33    

merci pour cette precision
 
mais euh pourquoi le meme script marchait en local alors ?? :??:  :heink:


Message édité par bedomon le 06-02-2006 à 16:47:07
Reply

Marsh Posté le 06-02-2006 à 17:22:19    

bon je reviens a la charge parce que ca m'enerve encore et toujours :D
mon script fonctionne presque bien mais la j'arrive ds me limite du javascript avec le gestion du RETURN
 
dans ma balise <form> j'ai action=formail.asp pour gerer l'envoie du mail avec les donné du formulaire et j'aiaussi onsubmit=validation(this.form) popur verifier les champs, mais le pbc'est que j'ai bien une alert si il manque des infos ds le formulaire mais une fois que je clique sur OK ca me met quand meme la page suivante (votre demande est prise en compte) comment je peux faire???

Reply

Marsh Posté le 06-02-2006 à 17:22:19   

Reply

Marsh Posté le 06-02-2006 à 17:27:58    

Si tu as une erreur tu dois faire un

Code :
  1. return false


Afin que l'evenement submit soit "annulé"...
 
Si tu n'as pas d'erreur  

Code :
  1. return true

Reply

Marsh Posté le 06-02-2006 à 17:34:18    

c'est bien ce que j'ai fai,  j'ai mis un bout de mon code a mon premier post.
j'ai meme essayé en enlevant le

Citation :

}else{ return true}


mais non rien a faire il me charge tout le temps la page d'apres
 
et pour le bouton envoyer du formiulaire j'ai mis ca:

Citation :

<input type="submit" name="Submit" value="Envoyer" tabindex="11" align="right" />


 
je vais esayer en changeant le type


Message édité par bedomon le 06-02-2006 à 17:38:08
Reply

Marsh Posté le 06-02-2006 à 17:42:29    

petit truc qui manque dans ta balise form, il faut mettre le return:

Code :
  1. <form id="form1" name="formulaire" class="police" method="post" action="formMail2.asp" onsubmit="return validation(this.form);">

Reply

Marsh Posté le 06-02-2006 à 17:51:12    

:ouimaitre:
 
merci beaucoup ca marche enfin et je me doutais que c'etai une histoire avec ces foutus return...

Reply

Marsh Posté le 06-02-2006 à 18:05:39    

et euh une petite question :  
bon je fais une verification champs par champs ce qui fais que si il y a plusieurs champs avec des données erronée ca peut etre fastidieurx de cliquer sur validé a chaque fois et de se rendre compte qu'il faut encore changé autre chose,  
et je vais me lancé dans une amelioration de ce script en faisant en sorte q'il n'y ai qu'un seul fenetre qui s'affiche ou juste un petit label en rouge (par exemple) et que tout les champs avec des erreurs soit avec un fond rouge mais je ne vois pas comment stocké tout les erreurs pour les traiter d'un coup???
 
qui peut m'aider, je veu po un code tout fais mais des piste pour le faire
merci les jeun's

Reply

Marsh Posté le 06-02-2006 à 18:23:40    

Bin tu as plein de solutions!!!
Tu crées une variable et tu concatènes les messages d'erreur au fur et à mesure dedans et en passant tu mets les inputs "pabons" en rouge via css.
Ou alors tu crées un tableau, et tu push chaque input en erreur dedans. Puis tu traites ton tableau...
 

Reply

Marsh Posté le 07-02-2006 à 10:55:02    

Erreur souvent commise et l'uatre jour j'ai passé 2 heures à comprendre ma connerie :/

Reply

Marsh Posté le 07-02-2006 à 10:58:06    

euh tun m'explique gatsu35  
moipo comprendre....  :??:  :??:

Reply

Marsh Posté le 07-02-2006 à 11:10:00    

<form onsubmit="">
 
j'avais directement mis : onsubmit="mafunction()"
alors qu'il fallait mettre onsubmit="return mafunction()"

Reply

Marsh Posté le 07-02-2006 à 11:12:34    

oki ;)
sinon en ce qui concerne mon petit script  
j'arrive a recupere les erreur mais je n'arrive pas a faire modifier le comportement des champs pour qu'il devienne rouge  :sweat:  
voila comment je compte m'y prendre (ca ne marche toujours pas (mais bon je crois que c'est normal)
 

Citation :

//javascript document
function validation {
 var erreur = new array();//tableau qui récupere les erreurs de saisie du formulaire
 var i = 0;
 var email = document.getElementById("eMail" ).value;
 var statut = true;
 
 if (document.getElementById("nomSociete" ).value == "" {
  erreur[i] = document.getElementById("nomSociete" )
  i+=1
  }
 if (document.getElementByID("nomContact" ).value =="" {
  erreur[i] = document.getElementById("nomContact" )
  i+=1
  }
   
 for j=0 to j=i {
  erreur[j].sytle = "backgroung-color = red "
  }

Reply

Marsh Posté le 07-02-2006 à 11:19:06    

Code :
  1. erreur[j].sytle = "backgroung-color = red "


4 fautes sur une ligne, erreur de recopie? :o
 
Moi j'aurais plutot fait comme ça:

Code :
  1. if (document.getElementById("nomSociete" ).value == "" ){
  2.   erreur.push(document.getElementById("nomSociete" ));
  3. }
  4. if (document.getElementByID("nomContact" ).value =="" ){
  5.   erreur.push(document.getElementById("nomContact" ));
  6. }
  7. for(i=0; i<erreur.length; i++){
  8.    erreur[j].style.backgroundColor = "red";
  9. }

Reply

Marsh Posté le 07-02-2006 à 11:51:33    

:ouimaitre:  
merci beaucoup c'est tres pratique ce push... ;)

Reply

Marsh Posté le 07-02-2006 à 13:12:14    

push est une méthode de l'objet array qui permet de rajouter une ligne dans le tableau

Reply

Marsh Posté le 07-02-2006 à 14:50:33    

j'ai fai toute mes modif par rapport a mon evolution du script et je trouve encore un pb
j'ai un booleen qui est a true par defaut et si il y a un des champs de vide je le passe a false et apres je fai return mon booleen comme ca si c false le onsubmit de mon form ne marche po mai en fait ca fonctionne pas???
voila le fautif:

Citation :

//javascript document
function validation {
 var erreur = new array();//tableau qui récupere les erreurs de saisie du formulaire
 var i = 0;
 var email = document.getElementById("eMail" ).value;
 var statut = true;
 if (document.getElementById("nomSociete" ).value == "" ){
  erreur.push(document.getElementById("nomSociete" ));
  statut = false;
 }
 if (statut == false) {
  for(i=0; i<erreur.length; i++){
   erreur[j].style.backgroundColor = "red";
  }
  return false;
 }else{
  return true;}
}


je l'ai raccourci mai la ya le principal et je ne comprend po prkoi il veu po mon return

Reply

Marsh Posté le 07-02-2006 à 15:44:34    

bon comme d'hab j'aurais pas fait pareil ;)
j'aurais fait comme ça:

Code :
  1. function validation {
  2. var erreur = new array();//tableau qui récupere les erreurs de saisie du formulaire
  3. var email = document.getElementById("eMail" ).value;
  4. if (document.getElementById("nomSociete" ).value == "" ){
  5.   erreur.push(document.getElementById("nomSociete" ));
  6. }
  7. if (erreur.length) {
  8.   for(i=0; i<erreur.length; i++){
  9.    erreur[i].style.backgroundColor = "red";
  10.   }
  11.   return false;
  12. }
  13. return true;
  14. }


 
edit: tu feras gaffe dans ton for tu boucles sur i mais tu te sers de j....

Message cité 1 fois
Message édité par anapajari le 07-02-2006 à 15:45:42
Reply

Marsh Posté le 07-02-2006 à 16:17:34    

bon  :fou:  
j'ai rajouter le () apres le function validation() mais toujour rein il ne veux rien entendre sur les return,  
le seul script qui fonctionne c'est celui que j'avais au depart

Citation :

function validation()  
{
 var statut = true;
        var email = document.getElementById("eMail" ).value;  
        if (email.search(/^[_a-z0-9-]+(.[_a-z0-9-]+)*[^._-]@[a-z0-9-]+(.[a-z0-9]{2,4})*$/) == -1)
        {  
            alert ('entrez une adresse Email valide');  
            document.getElementById("eMail" ).focus();  
            return false;  
        }  
        if(document.getElementById("nomSociete" ).value == "" )  
  {  
        alert ('veuillez entrer le nomde votre société');  
        document.getElementById("nomSociete" ).focus();  
        return false;  
     }
  if(document.getElementById("nomContact" ).value == "" )  
  {  
        alert ('veuillez entrer votre Nom');  
        document.getElementById("nomContact" ).focus();  
        return false;  
     }
  if(document.getElementById("adresseSociete" ).value == "" )  
  {  
        alert ('veuillez entrer votre adresse');  
        document.getElementById("adresseSociete" ).focus();  
        return false;  
     }  
  if(document.getElementById("commentaire" ).value == "" )  
  {  
         alert ('veuillez entrer un commentaire Obligatoire');  
         document.getElementById("commentaire" ).focus();  
         return false;  
     }
  if(document.getElementById("tel" ).value =="" )
  {
   alert ('Veuillez préciser votre telephone');
   document.getElementById("tel" ).focus();
   return false;
  }
}


 
alors je sais pa peut etre qu'avec tout le return false au bout d'un moment ca passait mais les autre j'ai fai gaffe au non de la fonction nom du ficher et tout et je n'y comprend rien

Reply

Marsh Posté le 07-02-2006 à 16:23:31    

montre tout le code de la page ....

Reply

Marsh Posté le 07-02-2006 à 16:37:46    

anapajari regarde ds tes message

Reply

Marsh Posté le 07-02-2006 à 16:40:19    

la c'est avec des popup et ca marche et le code du script est celui de dessus

Reply

Marsh Posté le 08-02-2006 à 10:02:31    

bon bon bon j'ai fai des changement et je me suis séparé de la boucle for  :cry:  
 
bon maintenant la pb est different j'arrive a obtenir une coloration des champs ou il y a une erreur mais il passe quand meme a la page suivante (votre demande est prise en compte)
en fait j'ai enlever de chaque bloc if le return = false et j'ai mis a la place un boleen et a la fin si le booleen est a false return est aussi a false, et bien c'est ca qu'il ne me prend pas en compte.....  
voila la nouveau script

Citation :

function validation()  
{
 var erreur = new Array();
 var statut = true;
        var email = document.getElementById("eMail" ).value;  
        if (email.search(/^[_a-z0-9-]+(.[_a-z0-9-]+)*[^._-]@[a-z0-9-]+(.[a-z0-9]{2,4})*$/) == -1)
        {  
    erreur.push(document.getElementById("eMail" ));
            document.getElementById("eMail" ).focus();
    document.getElementById("eMail" ).style.backgroundColor = "#fd8b8b";
    statut = false;
        }  
        if(document.getElementById("nomSociete" ).value == "" )  
  {
   erreur.push(document.getElementById("nomSociete" ));
        document.getElementById("nomSociete" ).focus();
    document.getElementById("nomSociete" ).style.backgroundColor = "#fd8b8b";
        statut = false;  
     }
  if(document.getElementById("nomContact" ).value == "" )  
  {  
   erreur.push(document.getElementById("nomContact" ));
        document.getElementById("nomContact" ).focus();  
    document.getElementById("nomContact" ).style.backgroundColor = "#fd8b8b";
        statut = false;  
     }
  if(document.getElementById("adresseSociete" ).value == "" )  
  {
   erreur.push(document.getElementById("adresseSociete" ));
        document.getElementById("adresseSociete" ).focus();  
        document.getElementById("adresseSociete" ).style.backgroundColor = "#fd8b8b";
    statut = false;  
     }  
  if(document.getElementById("commentaire" ).value == "" )  
  {  
   erreur.push(document.getElementById("commentaire" ));
         document.getElementById("commentaire" ).focus();  
   document.getElementById("commentaire" ).style.backgroundColor = "#fd8b8b";
         statut = false;  
     }
  if(document.getElementById("tel" ).value =="" )
  {
   erreur.push(document.getElementById("tel" ));
   document.getElementById("tel" ).focus();
   document.getElementById("tel" ).style.backgroundColor = "#fd8b8b";
   statut = false;
  }
  if (statut = false) {
   return false;
  }
}


je vois bien que le probleme vient du return mais je n'arrive pas a comprendre pourquoi il se comporte de cette maniere et comment y remedier.... :??:  :??:

Reply

Marsh Posté le 08-02-2006 à 10:10:03    

tu ne sais pas programmer à première vu
et tu ne connais rien non plus au javascript et je suis réaliste, ton code est bourré de fautes !!
 
A koi te sert erreur.push alors que tu passes tes éléments un par un c'est n'importe quoi, la premiere solution qu'anapajari t'a donné était la meilleure :o
 
et puis pour la fin on voit un gros manque de réflexion :  
  if (statut = false) {  
   return false;  
  }  
 
là il te manque un deuxième égal car automatiquement tu attribut false à statut
  if (statut == false) {  
   return false;  
  }  
 
et puis pourquoi faire une condition qui ne sert à rien alors que tu peux directement retourner statut  
return statut;

Reply

Marsh Posté le 08-02-2006 à 10:31:02    

pas a dire c'est vraiment pas beau comme code :D
 
Essaye avec un truc dans le genre:

Code :
  1. function validation(){
  2.   var error = new Array();
  3.   /*** checking input that must not be empty ***/
  4.   var fieldsNotEmpty = new Array('nomSociete', 'nomContact', 'adresseSociete', 'commentaire', 'tel');
  5.   for(i=0;i<fieldsNotEmpty.length;i++){
  6.     inputNode = document.getElementById(fieldsNotEmpty[i]);
  7.     if ( inputNode.value == "" ){
  8.       error.push(inputNode);
  9.     }
  10.   }
  11.   /*** checking email ***/
  12.   var emailNode = document.getElementById("eMail" );
  13.   if (emailNode.value.search(/^[_a-z0-9-]+(.[_a-z0-9-]+)*[^._-]@[a-z0-9-]+(.[a-z0-9]{2,4})*$/) == -1){
  14.     error.push(emailNode);
  15.   }
  16.   /*** checking for errors ***/
  17.   for(i=0; i<error.length; i++){
  18.     if ( i == 0 ){
  19.       /*** giving focus to first input with error***/
  20.       error[i].focus();
  21.     }
  22.     error[i].style.backgroundColor = "#fd8b8b";
  23.   }
  24.   return !error.length;
  25. }


code non testé & non garanti bug proof

Reply

Marsh Posté le 08-02-2006 à 10:40:15    

je suis d'accord mon code n'est pas tres beau mais quand on le regarde il devrait tourner sans probleme, non ????

Reply

Marsh Posté le 08-02-2006 à 11:23:40    

Ben nan ton code il tourne pas, je sais pas, si tu fais un code tu dois être capable de dire toi même s'il va tourner ou pas, sinon c'est que tu es un mauvais programmeur :/
 
tout de suite j'ai vu que ton code était pourri et qu'il y avait des lignes en trop

Reply

Marsh Posté le 08-02-2006 à 11:48:19    

teuh teuh teuh  :non:  
 
mon code tourne et la seul chose qui ne fonctionne pas est la coloration de champs erronées apres je sais tres bien qu'a la vue de la redondance des bloc IF une regroupement est possible mais je prefere resté sur quelque chose de simple et plus long a taper. Ensuite c'est sur le code d'anapajari est plsu concis,(voir dessous).

anapajari a écrit :

bon comme d'hab j'aurais pas fait pareil ;)
j'aurais fait comme ça:

Code :
  1. function validation {
  2. var erreur = new array();//tableau qui récupere les erreurs de saisie du formulaire
  3. var email = document.getElementById("eMail" ).value;
  4. if (document.getElementById("nomSociete" ).value == "" ){
  5.   erreur.push(document.getElementById("nomSociete" ));
  6. ......
  7. }


 
edit: tu feras gaffe dans ton for tu boucles sur i mais tu te sers de j....


 
 

gatsu35 a écrit :

Ben nan ton code il tourne pas, je sais pas, si tu fais un code tu dois être capable de dire toi même s'il va tourner ou pas, sinon c'est que tu es un mauvais programmeur :/
 
tout de suite j'ai vu que ton code était pourri et qu'il y avait des lignes en trop


 
Mon fonctionnement pour coder est peut etre particulier mais je me satisfait de cette methode ca me demande certaibnement plus de travail mais je prefere  :kaola:  
mais je sais aussi que vos remarque sont tres pertinentes et que prends compte a chaque fois exemple la methode push que tu m'a expliquer (et je t'en remercie)  
 
alors dire que mon code est pourri n'est pas tres sympa surtout qu'il tourne... (a peu pres)
mais voila il y a les noob et les pas noob et malgré les efforts que je faits je galere mais ca rentre quand meme dans ma petite cervelle :sarcastic:  
et c'est vrai que le web n'est pas m'a passion et que malgré la simplicité je bloque sur des truc tres con mais je m'y mets j'y suis obligé...
mais n'ai crainte je t'aime bien quand meme Gatsu35 car tu sais repondre a un post avec des explication a la clef c'est juste que je trouve pas sympa ta remarque (oups je l'ai mis deux fois)
je comprend quand meme ecq ue tu me met c'est juste que je n'arrive pas a pondre de suite un code en 20 ligne je prefere passer par ce que je maitrise et ensuite je nettoie le code (mais ensuite)
bon et puis si tu passe pres de naoned arrete et je ta paie un coup [:al_bundy]
et puis quand je finirais ce site je metterai l'adresse sur le forum et tu pourra voir ma reconnaissance (tu regarderas le code source et les commentaires :love:

Reply

Marsh Posté le 08-02-2006 à 11:52:28    

tu as lu ma premiere reponse tu as essayé ? oui ? non ?

Reply

Marsh Posté le 08-02-2006 à 12:01:20    

pour le onsubmit et le return oui j'ai essayé et pour modifier le css avec les input erronées je pense que c'est ce que j'essaye de faire.
 
ensuite la premiere methode d'anapajari que tu cite je l'ai essayé et je suis revenu avec mon code bourré de bloc if car justement il n'y avait pas de prise en compte du return (je ne sais pas pourquoi j'ai essaye plein de facon et je me rend compte qu'apres de multiple test qu'il n'y a que cette solution qui me fait revenir ur le page du formulaire
 
 
ps :ange: tu m'en veut hein di hein...
 
honnetement j'aurais été incapable de faire ca:

Citation :

for(i=0;i<fieldsNotEmpty.length;i++){
  inputNode = document.getElementById(fieldsNotEmpty[i]);
  if ( inputNode.value == "" ){
   error.push(inputNode);
  }
 }


Message édité par bedomon le 08-02-2006 à 12:02:58
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed