Mon contrôleur de formulaire en javascript

Mon contrôleur de formulaire en javascript - HTML/CSS - Programmation

Marsh Posté le 08-12-2007 à 19:09:36    

Bonsoir,
 
J'ai créer un formulaire (ci-dessous) pour un site, avec contrôleur de champs automatique.
 
J'ai décidé de rajouter un checkbox, et du coup j'aimerai qu'il soit contrôlé par mon javascript.
j'ai essayé de d'insérer un ID supplémentaire, mais rien à faire, je ne comprends pas.
Mais pour mieux cerner le problème, je vous met le code :

Code :
  1. <form action="" method="post" style="margin-bottom: 0"  onsubmit="return verif();">
  2.               <input type="hidden" name="recipient" value=""/>
  3.               <input type="hidden" name="redirect" value=""/>
  4.               <input type="hidden" name="subject" value=""/>
  5.               <div class="espace">
  6.        
  7.                 <label for="samaritains">
  8.                   Cours samaritains:
  9.                 </label>
  10.        <input type="checkbox" value="30 nov + 1 d&eacute;c" name="samaritains"  />
  11.        30 nov + 1 d&eacute;c
  12. <input type="checkbox" value="7 d&eacute;c + 8 d&eacute;c" name="samaritains"  />
  13.        7 d&eacute;c + 8 d&eacute;c
  14.        <input type="checkbox" value="14 d&eacute;c + 15 d&eacute;c<" name="samaritains" />
  15.        14 d&eacute;c + 15 d&eacute;c</div>
  16.               <div>
  17.                
  18.                 <label for="sensibilisation" >
  19.                   Cours sensibilisation:
  20.                 </label>
  21.                 <input type="checkbox" value="03,04,05,06d&eacute;c" name="sensibilisation"  />
  22.                 03,04,05,06d&eacute;c
  23. <input type="checkbox" value="10,11,12,13d&eacute;c" name="sensibilisation"  />
  24.                
  25.                 10,11,12,13d&eacute;c
  26.                 <input type="checkbox" value="17,18,19,20d&eacute;c" name="sensibilisation"  />
  27.               17,18,19,20d&eacute;c</div>
  28.               <div class="espace">
  29.                 <label for="confirmation" id="label_confirmation">
  30.                   Confirmation par
  31.                 </label>
  32.                 <select name="confirmation" id="confirmation"  >
  33.                   <option value="CHOISIR">
  34.                   CHOISIR
  35.                   </option>
  36.                   <option value="T&eacute;l&eacute;phone">
  37.                   T&eacute;l&eacute;phone
  38.                   </option>
  39.                   <option value="E-mail">
  40.                   E-mail
  41.                   </option>
  42.                   <option value="courrier">
  43.                   Courrier
  44.                   </option>
  45.                 </select>
  46.               </div>
  47.               <div class="espace">
  48.                 <label for="nom" id="label_nom">
  49.                   Nom
  50.                   <span>
  51.                     *
  52.                   </span>
  53.                 </label>
  54.                 <input type="text" name="nom" id="nom" />
  55.               </div>
  56.               <div class="espace">
  57.                 <label for="prenom" id="label_prenom">
  58.                   Prénom
  59.                   <span>
  60.                     *
  61.                   </span>
  62.                 </label>
  63.                 <input type="text" name="prenom" id="prenom" />
  64.               </div>
  65.               <div class="espace">
  66.                 <label for="adresse" id="label_adresse">
  67.                   Adresse
  68.                   <span>
  69.                     *
  70.                   </span>
  71.                 </label>
  72.                 <input type="text" name="adresse" id="adresse" />
  73.               </div>
  74.               <div class="espace">
  75.                 <label for="postal" id="label_postal">
  76.                   N° postal
  77.                   <span>
  78.                     *
  79.                   </span>
  80.                 </label>
  81.                 <input type="text" name="postal" id="postal" />
  82.               </div>
  83.               <div class="espace" >
  84.                 <label for="ville" id="label_ville">
  85.                   Ville
  86.                   <span>
  87.                     *
  88.                   </span>
  89.                 </label>
  90.                 <input type="text" name="ville" id="ville" />
  91.               </div>
  92.               <div class="espace">
  93.                 <label for="telephone" id="label_telephone">
  94.                   Téléphone
  95.                   <span>
  96.                     *
  97.                   </span>
  98.                 </label>
  99.                 <input type="text" name="telephone" id="telephone" />
  100.               </div>
  101.               <div class="espace">
  102.                 <label for="email" id="label_email">
  103.                   Email
  104.                   <span>
  105.                     *
  106.                   </span>
  107.                 </label>
  108.                 <input type="text" name="email" id="email" />
  109.               </div>
  110.               <div class="espace">
  111.                 <label for="age" id="label_age">
  112.                   N&eacute;(e) le
  113.                   <span>
  114.                     *
  115.                   </span>
  116.                 </label>
  117.                 <input type="text" name="ne_le" id="age" />
  118.               </div>
  119.               <div class="espace">
  120.                 <label for="message" id="label_message">
  121.                   Message
  122.                 </label>
  123. <textarea name="message" id="message" cols="40" rows="3"></textarea>
  124.               </div>
  125.              
  126.    
  127.              
  128.                <div class="espace">
  129.             <label for="cond" id="label_cond">
  130.                   J'accepte le CG <span>
  131.                     *
  132.             </span> </label>
  133.        
  134.             <input type="checkbox" name="condition" id="cond" />
  135.        
  136.               </div>
  137.               <div class="espace">
  138.                 <input name="submit" type="submit" class="envoyer" value="Envoyer" />
  139.               </div>
  140.             </form>


 
et le JS
 
 

Code :
  1. function verif() {
  2.  
  3.          var err = 0;
  4.  
  5.          var fields = new Array('confirmation', 'nom', 'prenom', 'adresse', 'postal', 'ville', 'telephone', 'age', 'email', 'cond');
  6.  
  7.      
  8.  
  9.          for(var i=0; i<fields.length; i++){
  10.  
  11.            if(document.getElementById(fields[i]).value == '') {
  13.              document.getElementById("label_"+fields[i]).className = 'error';
  14.  
  15.              err++;
  16.  
  17.            } else {
  19.              document.getElementById("label_"+fields[i]).className = '';
  21.            }
  23.          }
  24.  
  25.      
  27.          if( validerEmail('email') ) {
  29.            document.getElementById("label_email" ).className = '';
  31.          } else {
  32.  
  33.            document.getElementById("label_email" ).className = 'error';
  34.  
  35.            err++;
  37.          }
  38.  
  39.      
  41.         return ! err;
  42.  
  43.      
  44.  
  45.        }
  46.  
  47.      
  48.  
  49.        function validerEmail(idInput) {
  50.  
  51.          if (!document.getElementById(idInput).value.match(/^[\w\.\-]+@([\w\-]+\.)+[a-zA-Z]+$/)) {
  52.  
  53.            return false;
  54.  
  55.          }
  56.  
  57.          return true;
  58.  
  59.        }


 
   
 
Serait-il plus profitable de mettre un menu déroulant (plus facile?)
 
Je vous remercie de votre aide.
 
Bonne soirée
 
Gardem

Reply

Marsh Posté le 08-12-2007 à 19:09:36   

Reply

Marsh Posté le 09-12-2007 à 14:42:09    

désolé mais c est un peu bordelique
quelques trucs qui me sautent aux yeux
les labels n ont pas besoin d id
ton script est trop figé...l array au début meme s il semble etre une bonne idée retire toute sa souplesse à l automatisation
si tu pouvais juste indiquer quel champs tu veux rajouter a la verification...


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 11-12-2007 à 20:16:43    

Ok, le code présenté vérifie les champs obligatoires et change la classe CSS du label si le champs associé est vide, puis soumet ou non le formulaire, avec un traitement particulier pour l'adresse email.
 
Ça serait plus simple en effet de mettre un <select> vide par défaut plutot qu'une checkbox. Sinon tu as le choix entre:
- ajouter un traitement particulier pour la checkbox
- ajouter un bout de javascript sur la checkbox pour fixer son champs 'value' en fonction de son champs 'checked' à l'aide de onchange.
N'oublie pas de faire ces vérifications aussi du côté serveur, sans quoi les utilisateurs qui désactivent javascript passent au travers des protections.

Reply

Marsh Posté le 11-12-2007 à 20:28:10    

Une solution plus générique:
- sur chaque label, tu ajoute l'id du champs à controler, et le nom de la fonction de controle, avec des attributs customisés (<label myctrlfct="verifemail" myctrlfield="email" ...> ),
- pour vérifier le formulaire, tu parcours le document à l'aide de getElementByTag('label'), tu obtiens alors pour chaque label le nom du champs à vérifier, et la fonction qui va avec.

Reply

Sujets relatifs:

Leave a Replay

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