formulaire /// corrections

formulaire /// corrections - HTML/CSS - Programmation

Marsh Posté le 09-03-2006 à 11:55:43    

Bonjour,
j'ai besoin d'un coup de main pour une petite modification d'un script de formulaire.
J'aimerai que lorsque la personne fait faux , que mon input ait une bordure rouge, voir en plus de remplissage d'une couleur...
Actuellement j'ai uniquement le texte qui se met en rouge dont voici mon code javascript.

Code :
  1. // JavaScript Document
  4. function verif() {
  5. var err = 0;
  7. if(document.getElementById("nom" ).value == '') {
  8.  document.getElementById("label_nom" ).className = 'error';
  9.  err = 1;
  10. } else {
  11.  document.getElementById("label_nom" ).className = '';
  12. }
  14. if(document.getElementById("email" ).value == '' || validerEmail() == false) {
  15.  document.getElementById("label_email" ).className = 'error';
  16.  err = 1;
  17. } else {
  18.  document.getElementById("label_email" ).className = '';
  19. }
  21. if(document.getElementById("message" ).value == '') {
  22.  document.getElementById("label_message" ).className = 'error';
  23.  err = 1;
  24. } else {
  25.  document.getElementById("label_message" ).className = '';
  26. }
  28. if(err === 0) {
  29.  return true;
  30. } else {
  31.  return false;
  32. }
  34. }
  36. function validerEmail() {
  37. if (!document.getElementById("email" ).value.match(/^[\w\.\-]+@([\w\-]+\.)+[a-zA-Z]+$/)) {
  38.  document.getElementById("label_email" ).className = 'error';
  39.  return false;
  40. } else {
  41.  document.getElementById("label_email" ).className = '';
  42.  return true;
  43. }
  44. }


 
 
La classe error est pour le texte en rouge.
 
Qui peut m'aider :pt1cable:  
 
Merci  
vita

Reply

Marsh Posté le 09-03-2006 à 11:55:43   

Reply

Marsh Posté le 09-03-2006 à 13:34:59    

ben pour le input, dans le css, tu définis une classe qui a des bordures rouges et comme pour ton texte, en cas d'erreur, tu affectes le nom de la classe "bordure rouge" au input...

Reply

Marsh Posté le 09-03-2006 à 16:00:25    

Salut et concrétement ça donne quoi dans mon javascript?
si  
#
if(document.getElementById("email" ).value == '' || validerEmail() == false) {
#
        document.getElementById("label_email" ).className = 'error';
#
        err = 1;
#
    } else {
#
        document.getElementById("label_email" ).className = '';
#
    }
 
 
Je mets où input ?  
Merci pour l'aide
 
PS: Débutant javascript

Reply

Marsh Posté le 09-03-2006 à 16:56:50    

si j'ai bien compris, "email" est le nom de l'un de tes input.
donc : document.getElementById("email" ).className = 'error';

Reply

Marsh Posté le 10-03-2006 à 07:59:47    

et le HTML de ton formulaire ?

Message cité 1 fois
Reply

Marsh Posté le 14-03-2006 à 10:52:29    

gatsu35 a écrit :

et le HTML de ton formulaire ?


Bonjour et merci pour toutes ces réponses:
 
Maintenant que j'ai fini le formulaire, un dernier soucis est encore là:
Lorsque l'internate arrive sur la page, le navigateur IE  met un message d'erreur : l'éternel pop up:: comme la musique!
Comment éviter ceci , je comprends bien que c'est un javascript... y-a-t-il un moyen de contourner?
 voici le code  :p  

Code :
  1. <form action="http://www.cgi4all.org/cgi-bin/formmail.cgi" method="post"  onsubmit="return verif();">
  2.     <input type="hidden" name="recipient" value="appart@vitamine-c.ch"/> 
  3.                 <input type="hidden" name="redirect" value="http://www.auto-ecole-daniel.ch"/>
  4.       <fieldset>
  5.     <div class="espace">
  6.               <label for="samaritains">
  7.                 Samaritains
  8.               </label>
  9.     <select name="date samaritains">
  10.                       <option value="cours A"> Choisir une date </option>
  11.                       <option value="cours A"> 7 mars 2006 17h00 </option>
  12.                       <option value="cours sA"> 15 mars 2006 17h00 </option>
  13.                       <option value="cours V"> 18 mars 2006 17h15 </option>
  14.                     </select>
  15.     </div>
  16.             <div class="espace">
  17.               <label for="samaritains">
  18.                 Sensibilisation
  19.               </label>
  20.               <select name="date sensibilisation">
  21.                 <option value="cours s">
  22.                 Choisir une date
  23.                 </option>
  24.                 <option value="cours s">
  25.                 7 mars 2006 17h00
  26.                 </option>
  27.                 <option value="cours s">
  28.                 15 mars 2006 17h00
  29.                 </option>
  30.                 <option value="cours s">
  31.                 18 mars 2006 17h15
  32.                 </option>
  33.               </select>
  34.             </div>
  35.     <div class="espace">
  36.     <label for="nom" id="label_nom">Nom <span>*</span></label> <input type="text" name="nom" id="nom" /></div>
  45.       <div class="espace">
  46.               <label for="prenom" id="label_prenom">
  47.                 Prénom
  48.                 <span>
  49.                   *
  50.                 </span>
  51.               </label>
  52.               <input type="text" name="prenom" id="prenom" />
  53.             </div>
  54.             <div class="espace">
  55.               <label for="adresse" id="label_adresse">
  56.                 Adresse
  57.                 <span>
  58.                   *
  59.                 </span>
  60.               </label>
  61.               <input type="text" name="adresse" id="adresse" />
  62.             </div>
  63.             <div class="espace">
  64.               <label for="postal" id="label_postal">
  65.                 N° postal
  66.                 <span>
  67.                   *
  68.                 </span>
  69.               </label>
  70.               <input type="text" name="postal" id="postal" />
  71.             </div>
  72.             <div class="espace" >
  73.               <label for="ville" id="label_ville">
  74.                 Ville
  75.                 <span>
  76.                   *
  77.                 </span>
  78.               </label>
  79.               <input type="text" name="ville" id="ville" />
  80.             </div>
  81.             <div class="espace">
  82.               <label for="telephone" id="label_telephone">
  83.                 Téléphone
  84.                 <span>
  85.                   *
  86.                 </span>
  87.               </label>
  88.               <input type="text" name="telephone" id="telephone" />
  89.             </div>
  90.             <div class="espace">
  91.               <label for="email" id="label_email">Email <span>*</span></label> <input type="text" name="email" id="email" />
  92.             </div>
  93.         <div class="espace">
  94.      <label for="message" id="label_message">Message <span>*</span></label> <textarea wrap="hard" name="message" id="message" cols="40" rows="5"></textarea></div>
  95.  <div class="espace"><input type="submit" class="envoyer" value="Envoyer" /></div>
  96.    </fieldset>
  97.    </form>


et javascript

Code :
  1. // JavaScript Document
  4. function verif() {
  5. var err = 0;
  7. if(document.getElementById("nom" ).value == '') {
  8.  document.getElementById("label_nom" ).className = 'error';
  9.  err = 1;
  10. } else {
  11.  document.getElementById("label_nom" ).className = '';
  12. }
  15. if(document.getElementById("prenom" ).value == '') {
  16.  document.getElementById("label_prenom" ).className = 'error';
  17.  err = 1;
  18. } else {
  19.  document.getElementById("label_prenom" ).className = '';
  20. }
  23. if(document.getElementById("adresse" ).value == '') {
  24.  document.getElementById("label_adresse" ).className = 'error';
  25.  err = 1;
  26. } else {
  27.  document.getElementById("label_adresse" ).className = '';
  28. }
  30. if(document.getElementById("postal" ).value == '') {
  31.  document.getElementById("label_postal" ).className = 'error';
  32.  err = 1;
  33. } else {
  34.  document.getElementById("label_postal" ).className = '';
  35. }
  37. if(document.getElementById("ville" ).value == '') {
  38.  document.getElementById("label_ville" ).className = 'error';
  39.  err = 1;
  40. } else {
  41.  document.getElementById("label_ville" ).className = '';
  42. }
  44. if(document.getElementById("telephone" ).value == '') {
  45.  document.getElementById("label_telephone" ).className = 'error';
  46.  err = 1;
  47. } else {
  48.  document.getElementById("label_telephone" ).className = '';
  49. }
  51. if(document.getElementById("email" ).value == '' || validerEmail() == false) {
  52.  document.getElementById("label_email" ).className = 'error';
  53.  err = 1;
  54. } else {
  55.  document.getElementById("label_email" ).className = '';
  56. }
  58. if(document.getElementById("message" ).value == '') {
  59.  document.getElementById("label_message" ).className = 'error';
  60.  err = 1;
  61. } else {
  62.  document.getElementById("label_message" ).className = '';
  63. }
  65. if(err === 0) {
  66.  return true;
  67. } else {
  68.  return false;
  69. }
  71. }
  73. function validerEmail() {
  74. if (!document.getElementById("email" ).value.match(/^[\w\.\-]+@([\w\-]+\.)+[a-zA-Z]+$/)) {
  75.  document.getElementById("label_email" ).className = 'error';
  76.  return false;
  77. } else {
  78.  document.getElementById("label_email" ).className = '';
  79.  return true;
  80. }
  81. }


 
Merci de votre aide
vita

Reply

Marsh Posté le 14-03-2006 à 11:00:36    

pour eviter ce meessage d'erreur faut regarder la ligne d'où vient cette erreur :
   if(err === 0)  
tu le transforme en if( err==0)
 
sinon tu aurais pu faire un tableau avec tous les id et checker ce tableau tu aurai perdu beaucoup moins de temps à taper

Message cité 1 fois
Reply

Marsh Posté le 14-03-2006 à 11:05:46    

excusez moi c'est pas une reponse à votre message, mais j'ai besoin d'aide pour faire un petit programme en matlab qui trace 2 ou 3 cercles de rayon et centre connus ensuite calculet le point d'intersection entre ces cercle. merci pour votre aide

Reply

Marsh Posté le 14-03-2006 à 11:08:21    

si tu jouais pas ton boulet et que tu te créais ton propre topic dans la catégorie adequat merci

Reply

Marsh Posté le 14-03-2006 à 14:12:39    

gatsu35 a écrit :

pour eviter ce meessage d'erreur faut regarder la ligne d'où vient cette erreur :
   if(err === 0)  
tu le transforme en if( err==0)
 
sinon tu aurais pu faire un tableau avec tous les id et checker ce tableau tu aurai perdu beaucoup moins de temps à taper


 
 
Salut,
Merci pour ta réponse, mais ça ne change pas grand chose, voir rien :pt1cable:  
 
voici le message d'erreur : ( en haut dessous de barre IE)
" Pour vous aider à protéger votre ordinateur, Internet Explorer à restreint l'affichage du contenu actif de ce fichier, qui pourrait accéder à votre ordinateur. Cliquez ici pour plus d'option"
 
Et dans le cas de non acceptation, le javascript ci-dessus n'est pas actif.
 
Merci de ton aide
vita :ouch:  
 

Message cité 1 fois
Reply

Marsh Posté le 14-03-2006 à 14:12:39   

Reply

Marsh Posté le 14-03-2006 à 14:32:06    

J'ai essayé ton code sur IE 6.0.29 sur un XP-SP2 marche très bien, sur FF aussi d'ailleurs ...  
 
Tiens voila exactement le code que j'ai testé ( au départ j'ai pris exactement le tien puis je l'ai un peu modifié parce que c'était pas top):

Code :
  1. <?xml version="1.0"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.   <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.     <title>Test</title>
  7.     <style type="text/css">
  8.     .error{
  9.       background-color:red;
  10.     }
  11.     </style>
  12.   <script type="text/javascript">
  13.   function verif() {
  14.     var err = 0;
  15.     var fields = new Array('nom', 'prenom', 'adresse', 'postal', 'ville', 'telephone', 'email', 'message');
  17.     for(var i=0; i<fields.length; i++){
  18.       if(document.getElementById(fields[i]).value == '') {
  19.         document.getElementById("label_"+fields[i]).className = 'error';
  20.         err++;
  21.       } else {
  22.         document.getElementById("label_"+fields[i]).className = '';
  23.       }
  24.     }
  26.     if( validerEmail('email') ) {
  27.       document.getElementById("label_email" ).className = '';
  28.     } else {
  29.       document.getElementById("label_email" ).className = 'error';
  30.       err++;
  31.     }
  33.    return ! err;
  35.   }
  37.   function validerEmail(idInput) {
  38.     if (!document.getElementById(idInput).value.match(/^[\w>\-]+@([\w\-]+> )+[a-zA-Z]+$/)) {
  39.       return false;
  40.     }
  41.     return true;
  42.   }
  43.   </script>
  44.   </head>
  45.   <body>
  46.     <form action="http://www.cgi4all.org/cgi-bin/formmail.cgi" method="post" onsubmit="return verif();">
  47.       <input type="hidden" name="recipient" value="appart@vitamine-c.ch" />
  48.       <input type="hidden" name="redirect" value="http://www.auto-ecole-daniel.ch" />
  49.       <fieldset>
  50.         <div class="espace">
  51.           <label for="samaritains"> Samaritains </label>
  52.           <select name="date samaritains">
  53.             <option value="cours A"> Choisir une date </option>
  54.             <option value="cours A"> 7 mars 2006 17h00 </option>
  55.             <option value="cours sA"> 15 mars 2006 17h00 </option>
  56.             <option value="cours V"> 18 mars 2006 17h15 </option>
  57.           </select>
  58.         </div>
  59.         <div class="espace">
  60.           <label for="samaritains"> Sensibilisation </label>
  61.           <select name="date sensibilisation">
  62.             <option value="cours s"> Choisir une date </option>
  63.             <option value="cours s"> 7 mars 2006 17h00 </option>
  64.             <option value="cours s"> 15 mars 2006 17h00 </option>
  65.             <option value="cours s"> 18 mars 2006 17h15 </option>
  66.           </select>
  67.         </div>
  68.         <div class="espace">
  69.           <label for="nom" id="label_nom">Nom <span>*</span></label>
  70.           <input type="text" name="nom" id="nom" />
  71.         </div>
  72.         <div class="espace">
  73.           <label for="prenom" id="label_prenom"> Prém * </label>
  74.           <input type="text" name="prenom" id="prenom" />
  75.         </div>
  76.         <div class="espace">
  77.           <label for="adresse" id="label_adresse"> Adresse * </label>
  78.           <input type="text" name="adresse" id="adresse" />
  79.         </div>
  80.         <div class="espace">
  81.           <label for="postal" id="label_postal"> N° postal * </label>
  82.           <input type="text" name="postal" id="postal" />
  83.         </div>
  84.         <div class="espace">
  85.           <label for="ville" id="label_ville"> Ville * </label>
  86.           <input type="text" name="ville" id="ville" />
  87.         </div>
  88.         <div class="espace">
  89.           <label for="telephone" id="label_telephone"> Téphone * </label>
  90.           <input type="text" name="telephone" id="telephone" />
  91.         </div>
  92.         <div class="espace">
  93.           <label for="email" id="label_email">Email *</label>
  94.           <input type="text" name="email" id="email" />
  95.         </div>
  96.         <div class="espace">
  97.           <label for="message" id="label_message">Message *</label>
  98.           <textarea wrap="hard" name="message" id="message" cols="40" rows="5"></textarea>
  99.         </div>
  100.         <div class="espace">
  101.           <input type="submit" class="envoyer" value="Envoyer" />
  102.         </div>
  103.       </fieldset>
  104.     </form>
  105.   </body>
  106. </html>

Message cité 1 fois
Message édité par anapajari le 14-03-2006 à 14:35:49
Reply

Marsh Posté le 14-03-2006 à 14:35:01    

vita 100 a écrit :

Salut,
Merci pour ta réponse, mais ça ne change pas grand chose, voir rien :pt1cable:  
 
voici le message d'erreur : ( en haut dessous de barre IE)
" Pour vous aider à protéger votre ordinateur, Internet Explorer à restreint l'affichage du contenu actif de ce fichier, qui pourrait accéder à votre ordinateur. Cliquez ici pour plus d'option"
 
Et dans le cas de non acceptation, le javascript ci-dessus n'est pas actif.
 
Merci de ton aide
vita :ouch:


Ce message d'erreur est simplement une protection pour empecher un script local (j'entend par là protocole file://) d'exécuter du javascript.
dnoc tu clique sur la barre jaune et tu dis okay clique.
 
Sinon pourquoi tu ne teste pas ta page sur un serveur web en local, ???

Reply

Marsh Posté le 14-03-2006 à 14:36:05    

un conseil :o
mets des _ (underscores) à la place des " " (espaces) dans les names de tes champs

Message cité 1 fois
Reply

Marsh Posté le 14-03-2006 à 15:09:50    

gatsu35 a écrit :

un conseil :o
mets des _ (underscores) à la place des " " (espaces) dans les names de tes champs


 
 
Merci pour tous vos messages:
Le code modifié (anapajari) fonctionne sauf le mail, petit problème à ce niveau là :) Il ne veut pas me l'envoyer....
 
Autrement une dernière question, Est-ce possible de mettre le sujet du mail ?  
Actuellemnt lorsque je le reçois, il m'informe sur la personne qui me l'a envoyé ( grace au mail) mais par contre, je ne connais pas le sujet ( par exemple : formulaire du site ...)
Peut-on rajouter un "sbject" en CGI?
 
Merci

Reply

Marsh Posté le 16-03-2006 à 17:18:06    

anapajari a écrit :

J'ai essayé ton code sur IE 6.0.29 sur un XP-SP2 marche très bien, sur FF aussi d'ailleurs ...  
 
Tiens voila exactement le code que j'ai testé ( au départ j'ai pris exactement le tien puis je l'ai un peu modifié parce que c'était pas top):

Code :
  1. <?xml version="1.0"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.   <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.     <title>Test</title>
  7.     <style type="text/css">
  8.     .error{
  9.       background-color:red;
  10.     }
  11.     </style>
  12.   <script type="text/javascript">
  13.   function verif() {
  14.     var err = 0;
  15.     var fields = new Array('nom', 'prenom', 'adresse', 'postal', 'ville', 'telephone', 'email', 'message');
  17.     for(var i=0; i<fields.length; i++){
  18.       if(document.getElementById(fields[i]).value == '') {
  19.         document.getElementById("label_"+fields[i]).className = 'error';
  20.         err++;
  21.       } else {
  22.         document.getElementById("label_"+fields[i]).className = '';
  23.       }
  24.     }
  26.     if( validerEmail('email') ) {
  27.       document.getElementById("label_email" ).className = '';
  28.     } else {
  29.       document.getElementById("label_email" ).className = 'error';
  30.       err++;
  31.     }
  33.    return ! err;
  35.   }
  37.   function validerEmail(idInput) {
  38.     if (!document.getElementById(idInput).value.match(/^[\w>\-]+@([\w\-]+> )+[a-zA-Z]+$/)) {
  39.       return false;
  40.     }
  41.     return true;
  42.   }
  43.   </script>
  44.   </head>
  45.   <body>
  46.     <form action="http://www.cgi4all.org/cgi-bin/formmail.cgi" method="post" onsubmit="return verif();">
  47.       <input type="hidden" name="recipient" value="appart@vitamine-c.ch" />
  48.       <input type="hidden" name="redirect" value="http://www.auto-ecole-daniel.ch" />
  49.       <fieldset>
  50.         <div class="espace">
  51.           <label for="samaritains"> Samaritains </label>
  52.           <select name="date samaritains">
  53.             <option value="cours A"> Choisir une date </option>
  54.             <option value="cours A"> 7 mars 2006 17h00 </option>
  55.             <option value="cours sA"> 15 mars 2006 17h00 </option>
  56.             <option value="cours V"> 18 mars 2006 17h15 </option>
  57.           </select>
  58.         </div>
  59.         <div class="espace">
  60.           <label for="samaritains"> Sensibilisation </label>
  61.           <select name="date sensibilisation">
  62.             <option value="cours s"> Choisir une date </option>
  63.             <option value="cours s"> 7 mars 2006 17h00 </option>
  64.             <option value="cours s"> 15 mars 2006 17h00 </option>
  65.             <option value="cours s"> 18 mars 2006 17h15 </option>
  66.           </select>
  67.         </div>
  68.         <div class="espace">
  69.           <label for="nom" id="label_nom">Nom <span>*</span></label>
  70.           <input type="text" name="nom" id="nom" />
  71.         </div>
  72.         <div class="espace">
  73.           <label for="prenom" id="label_prenom"> Prém * </label>
  74.           <input type="text" name="prenom" id="prenom" />
  75.         </div>
  76.         <div class="espace">
  77.           <label for="adresse" id="label_adresse"> Adresse * </label>
  78.           <input type="text" name="adresse" id="adresse" />
  79.         </div>
  80.         <div class="espace">
  81.           <label for="postal" id="label_postal"> N° postal * </label>
  82.           <input type="text" name="postal" id="postal" />
  83.         </div>
  84.         <div class="espace">
  85.           <label for="ville" id="label_ville"> Ville * </label>
  86.           <input type="text" name="ville" id="ville" />
  87.         </div>
  88.         <div class="espace">
  89.           <label for="telephone" id="label_telephone"> Téphone * </label>
  90.           <input type="text" name="telephone" id="telephone" />
  91.         </div>
  92.         <div class="espace">
  93.           <label for="email" id="label_email">Email *</label>
  94.           <input type="text" name="email" id="email" />
  95.         </div>
  96.         <div class="espace">
  97.           <label for="message" id="label_message">Message *</label>
  98.           <textarea wrap="hard" name="message" id="message" cols="40" rows="5"></textarea>
  99.         </div>
  100.         <div class="espace">
  101.           <input type="submit" class="envoyer" value="Envoyer" />
  102.         </div>
  103.       </fieldset>
  104.     </form>
  105.   </body>
  106. </html>



 
Salut Chef,
Ton code est super cool sauf que lorsque je valide ton formulaire, l'e-mail reste en rouge et donc le formulaire ne part pas :pt1cable:  
Pourtant le mail me semble correcte blabla@yahoo.fr  
Merci de ta réponse
 
vita :hello:  

Reply

Marsh Posté le 16-03-2006 à 17:45:05    

c'est ta fonction validerEmail qui suxe des ours!!!
Dsl j'ai pas le temps de la refaire la mais ta regex a l'air moldave!

Message cité 1 fois
Reply

Marsh Posté le 16-03-2006 à 17:54:14    

anapajari a écrit :

c'est ta fonction validerEmail qui suxe des ours!!!
Dsl j'ai pas le temps de la refaire la mais ta regex a l'air moldave!


salut:
 
Que veux-tu dire en français?" Dsl j'ai pas le temps de la refaire la mais ta regex a l'air moldave!"
J'en déduit que tu n'as pas le temps et que peut-être un peu plus tard..
C'est ça?
 :pt1cable:

Reply

Marsh Posté le 16-03-2006 à 18:01:09    

tsss ... et j'ai même pas parler l33t en plus :o
 
Bref ta fonction validerMail retourne false même quand l'email est valide.  
C'est à mon avis l'expression régulière ( la chaine de caractère entre / dans les paramètres de match) qui ne permet pas une bonne vérification du format de l'email.
Je te conseille donc vivement de te pencher sur ce point précis, moi-même n'ayant actuellement pas le temps de le faire ( enfin si je veux être à l'heure à l'apéro!) ...


Message édité par anapajari le 16-03-2006 à 18:03:16
Reply

Sujets relatifs:

Leave a Replay

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