Problème de validation de formulaire

Problème de validation de formulaire - HTML/CSS - Programmation

Marsh Posté le 17-03-2013 à 16:04:16    

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
Reply

Marsh Posté le 17-03-2013 à 16:04:16   

Reply

Marsh Posté le 17-03-2013 à 16:45:39    

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
Reply

Marsh Posté le 17-03-2013 à 18:20:26    

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
Reply

Sujets relatifs:

Leave a Replay

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