Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1139 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème de validation de formulaire

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème de validation de formulaire

n°2180993
jbboschung
Posté le 17-03-2013 à 16:04:16  profilanswer
 

Bonjour,
 
Je rencontre un soucis avec un script en js pour la validation d'un simple formulaire de contact.
 
Ci-dessous la page html

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  5.   <meta name="generator" content="PSPad editor, www.pspad.com">
  6.   <title>gestFuite - Contact</title>
  7.  
  8.   <!-- CSS pour formulaire -->
  9.   <link rel="stylesheet" type="text/css" href="css/contact.css" />
  11.   <!-- Appel fonctions js pour controle formulaire -->
  12.   <script type="text/javascript" src="js/contact.js"></script>
  14.   </head>
  16.   <body>
  18.     <form id="contactform" class="rounded" method="post" action="traitement_contact.php" onsubmit="return verifForm(this)" >
  19.     <h3>Formulaire de contact</h3>
  20.    
  21.     <div class="field">
  22.         <label for="nom">Nom:</label>
  23.         <input type="text" class="input" name="nom" id="nom" onblur="verifNom(this)" />
  24.         <p class="hint">Entrer votre nom.</p>
  25.     </div>
  26.    
  27.     <div class="field">
  28.         <label for="email">Email:</label>
  29.         <input type="text" class="input" name="email" id="email" onblur="verifEmail(this)" />
  30.         <p class="hint">Entrer votre email.</p>
  31.     </div>
  32.    
  33.     <div class="field">
  34.         <label for="objet">Objet:</label>
  35.         <input type="text" class="input" name="objet" id="objet" onblur="verifObjet(this)" />
  36.         <p class="hint">Entrer un objet.</p>
  37.     </div>
  38.    
  39.     <div class="field">
  40.         <label for="message">Message:</label>
  41.         <textarea class="input textarea" name="message" id="message" onblur="verifMessage(this)" >
  42.         </textarea>
  43.         <p class="hint">Saisir votre message.</p>
  44.     </div>
  45.    
  46.     <input type="submit" name="envoi"  class="button" value="Submit" />
  47.     </form>
  49.   </body>
  51. </html>


 
et voici mon script contact.js

Code :
  1. // JavaScript Document
  3. // Si erreur, alors le champs en cause est mis en couleur
  4. function surligne(champ, erreur)
  5. {
  6.    if(erreur)
  7.       champ.style.backgroundColor = "#fba";
  8.    else
  9.       champ.style.backgroundColor = "";
  10. };
  12. // On vérifie si le champs nom n'est pas vide
  13. function verifNom(champ)
  14. {
  15.    if(champ.value == "" )
  16.    {
  17.       surligne(champ, true);
  18.       return false;
  19.    }
  20.    else
  21.    {
  22.       surligne(champ, false);
  23.       return true;
  24.    }
  25. };
  26. //On vérifie si l'email entré est bien valide
  27. function verifEmail(champ)
  28. {
  29.    var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
  30.    if(!regex.test(champ.value))
  31.    {
  32.       surligne(champ, true);
  33.       return false;
  34.    }
  35.    else
  36.    {
  37.       surligne(champ, false);
  38.       return true;
  39.    }
  40. };
  41. // On vérifie si le champs objet n'est pas vide
  42. function verifObjet(champ)
  43. {
  44.    if(champ.value == "" )
  45.    {
  46.       surligne(champ, true);
  47.       return false;
  48.    }
  49.    else
  50.    {
  51.       surligne(champ, false);
  52.       return true;
  53.    }
  54. };
  55. // On vérifie si le champs message n'est pas vide
  56. function verifMessage(champ)
  57. {
  58.    if(champ.value == "" )
  59.    {
  60.       surligne(champ, true);
  61.       return false;
  62.    }
  63.    else
  64.    {
  65.       surligne(champ, false);
  66.       return true;
  67.    }
  68. };
  69. // On vérifie si tout le formulaire est bien rempli avant l'envoi
  70. function verifForm(f)
  71. {
  72.    var nomOk = false;
  73.    var emailOk = false;
  74.    var objetOk = false;
  75.    var messageOk = false;
  76.  
  77.    nomOk = verifNom(f.nom);
  78.    emailOk = verifEmail(f.email);
  79.    objetOk = verifObjet(f.objet);
  80.    messageOk = verifMessage(f.message);
  82.    if(nomOk && emailOk && objetOk && messageOk)
  83.    {
  84.       return true;
  85.    }
  86.    else
  87.    {
  88.       alert("Veuillez remplir correctement tous les champs" );
  89.       return false;
  90.    }
  91. };


 
Donc en gros, je vérifie que chaque champs (Nom, Objet et Message) ne soient pas vide, et que le champs 'Email' est une adresse valide.
Si un des champs n'est pas conforme, la zone de saisie se colore en rouge.
Ce contrôle se fait après chaque sortie de champs (onblur) et encore une fois au final, sur le (onsubmit) du formulaire.
 
Normalement, si un des champs n'est pas validé, la valeur 'false' est retournée et le formulaire ne devait pas être envoyé (onsubmit="return(...)" ).
 
Hors que les champs soient remplis ou pas, le formulaire passe outre. Je précise que je suis sous Google Chrome (25), hors apparement sous IE 10, ça fonctionne.
 
 
Inutile de vous préciser que je suis plus que débutant en JS.
Si quelqu'un peut m'expliquer ce quil faudrait faire pour que cela fonctionne aussi sous Google Chrome, je lui en serais très reconnaissant.
 
 
Merci d'avance
 
Salutations


Message édité par jbboschung le 17-03-2013 à 16:20:07
mood
Publicité
Posté le 17-03-2013 à 16:04:16  profilanswer
 

n°2180996
jbboschung
Posté le 17-03-2013 à 16:45:39  profilanswer
 

Re-bonjour,
 
Ayant trouvé la (enfin du moins une) solution, je vais la posté ci-dessous.
 
 
En parcourant le web, je viens de trouver ceci, à savoir modifier l'appel du script js externe.
 
 
Avant j'avais écris ceci

Code :
  1. <script type="text/javascript" src="contact.js"></script>


 
Et maintenant en écrivant ainsi

Code :
  1. <script language="javascript" src="contact.js"></script>


 
ça fonctionne.
 
Je serais néanmoins preneur de connaitre le pourquoi du comment.
 
Salutations


Message édité par jbboschung le 17-03-2013 à 16:46:19
n°2181002
gatsu35
Blablaté par Harko
Posté le 17-03-2013 à 18:20:26  profilanswer
 

c'est qu'il y a un probleme car normalement la vraie norme est type="text/javascript"
 
Language="javascript" n'a plus cours du tout


---------------
Blablaté par Harko

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème de validation de formulaire

 

Sujets relatifs
Problème affichage date dans le module de newsProblème pour modifier une fonction
probleme d' erreur synthaxique sur PythonProblème d'exécution de QT [résolu]
problème affichage image dans packageProblème de formulaire javascript validation
probleme validation de formulaire javascriptProblème de validation de formulaire
problème de validation d'un formulaireProbleme de validation de formulaire... page2
Plus de sujets relatifs à : Problème de validation de formulaire

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.074 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR