Mon contrôleur de formulaire en javascript

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 :

<form action="" method="post" style="margin-bottom: 0"  onsubmit="return verif();">
              <input type="hidden" name="recipient" value=""/>
              <input type="hidden" name="redirect" value=""/>
              <input type="hidden" name="subject" value=""/>
              <div class="espace">
        
                <label for="samaritains">
                  Cours samaritains:
                </label>
    			<input type="checkbox" value="30 nov + 1 d&eacute;c" name="samaritains"  />
   				30 nov + 1 d&eacute;c
<input type="checkbox" value="7 d&eacute;c + 8 d&eacute;c" name="samaritains"  />
   				7 d&eacute;c + 8 d&eacute;c
   				<input type="checkbox" value="14 d&eacute;c + 15 d&eacute;c<" name="samaritains" />
   				14 d&eacute;c + 15 d&eacute;c</div>
              <div>
                
                <label for="sensibilisation" >
                  Cours sensibilisation:
                </label>
                <input type="checkbox" value="03,04,05,06d&eacute;c" name="sensibilisation"  />
                03,04,05,06d&eacute;c
<input type="checkbox" value="10,11,12,13d&eacute;c" name="sensibilisation"  />
                
                10,11,12,13d&eacute;c
                <input type="checkbox" value="17,18,19,20d&eacute;c" name="sensibilisation"  />
              17,18,19,20d&eacute;c</div>
              <div class="espace">
                <label for="confirmation" id="label_confirmation">
                  Confirmation par
                </label>
                <select name="confirmation" id="confirmation"  >
                  <option value="CHOISIR">
                  CHOISIR
                  </option>
                  <option value="T&eacute;l&eacute;phone">
                  T&eacute;l&eacute;phone
                  </option>
                  <option value="E-mail">
                  E-mail
                  </option>
                  <option value="courrier">
                  Courrier
                  </option>
                </select>
              </div>
              <div class="espace">
                <label for="nom" id="label_nom">
                  Nom 
                  <span>
                    *
                  </span>
                </label>
                <input type="text" name="nom" id="nom" />
              </div>
              <div class="espace">
                <label for="prenom" id="label_prenom">
                  Prénom 
                  <span>
                    *
                  </span>
                </label>
                <input type="text" name="prenom" id="prenom" />
              </div>
              <div class="espace">
                <label for="adresse" id="label_adresse">
                  Adresse 
                  <span>
                    *
                  </span>
                </label>
                <input type="text" name="adresse" id="adresse" />
              </div>
              <div class="espace">
                <label for="postal" id="label_postal">
                  N° postal 
                  <span>
                    *
                  </span>
                </label>
                <input type="text" name="postal" id="postal" />
              </div>
              <div class="espace" >
                <label for="ville" id="label_ville">
                  Ville 
                  <span>
                    *
                  </span>
                </label>
                <input type="text" name="ville" id="ville" />
              </div>
              <div class="espace">
                <label for="telephone" id="label_telephone">
                  Téléphone 
                  <span>
                    *
                  </span>
                </label>
                <input type="text" name="telephone" id="telephone" />
              </div>
              <div class="espace">
                <label for="email" id="label_email">
                  Email 
                  <span>
                    *
                  </span>
                </label>
                <input type="text" name="email" id="email" />
              </div>
              <div class="espace">
                <label for="age" id="label_age">
                  N&eacute;(e) le 
                  <span>
                    *
                  </span>
                </label>
                <input type="text" name="ne_le" id="age" />
              </div>
              <div class="espace">
                <label for="message" id="label_message">
                  Message
                </label>
<textarea name="message" id="message" cols="40" rows="3"></textarea>
              </div>
              
     
              
               <div class="espace">
            <label for="cond" id="label_cond">
                  J'accepte le CG <span>
                    *
            </span> </label>
         
            <input type="checkbox" name="condition" id="cond" />
         
              </div>
              <div class="espace">
                <input name="submit" type="submit" class="envoyer" value="Envoyer" />
              </div>
            </form>

et le JS

function verif() {
  
         var err = 0;
  
         var fields = new Array('confirmation', 'nom', 'prenom', 'adresse', 'postal', 'ville', 'telephone', 'age', 'email', 'cond');
  
       
  
         for(var i=0; i<fields.length; i++){
  
           if(document.getElementById(fields[i]).value == '') {
 
             document.getElementById("label_"+fields[i]).className = 'error';
  
             err++;
  
           } else {
 
             document.getElementById("label_"+fields[i]).className = '';
 
           }
 
         }
  
       
 
         if( validerEmail('email') ) {
 
           document.getElementById("label_email").className = '';
 
         } else {
  
           document.getElementById("label_email").className = 'error';
  
           err++;
 
         }
  
       
 
        return ! err;
  
       
  
       }
  
       
  
       function validerEmail(idInput) {
  
         if (!document.getElementById(idInput).value.match(/^[\w\.\-]+@([\w\-]+\.)+[a-zA-Z]+$/)) {
  
           return false;
  
         }
  
         return true;
  
       }
 

Serait-il plus profitable de mettre un menu déroulant (plus facile?)

Je vous remercie de votre aide.

Bonne soirée

Gardem[/i][/i][/i]

Salut,

je n'ai pas vu dans ton code où tu avais essayé de controlé tes checkbox.

au vu de ce que tu as fais pour que samaritains rentre dans "la boite" ( je dis ça car apparemment tu veux controler tes champs avec une seule fonction générique ) une liste déroulante collera mieux.

sinon on peut savoir si une checkbox est coché ou non avec le booléen checkbox de l'objet.

par exemple si je veux savoir que ton premier checkbox est checked je peux faire :

<input [b]id='aa' [/b]type="checkbox" value="30 nov + 1 d&eacute;c" name="samaritains"  />

et en js

if (!document.getElementById('aa').checked) { alert("le premier checkbox n'est pas coché"); }

si tu veux verifier que au moins un checkbox est coché il faudrait boucler sur tous les checkbox et mettre une valeur a true des que t'en trouve une de coché.

P.S. rien a voir avec js mais si tes cases à cocher sont a choix multiples il me semble que mettre name="samaritains[]" t'aidera a obtenir le résultat en php dans la feuille pour recuperer les résultats.
sinon les boutons radio ne vaudrait-il pas mieux.
Modifié par CPascal (09 Dec 2007 - 01:03)

Merci beaucoup, ça marche nikel.

Mais au fait, j'aimerai en plus de l'alerte écrit, appliquer la classe error pour appliquer un couleur rouge si l'élément n'est pas coché.

Est-ce possible de faire qqch dans le javascript?

Merci d'avance

gardem