Sujet Précédent Sujet Suivant

Validation sur 2 champs spécifiques

lavm01 Messages postés 69 Date d'inscription vendredi 16 juin 2006 Statut Membre Dernière intervention 5 octobre 2012 - 17 nov. 2006 à 18:14
lavm01 Messages postés 69 Date d'inscription vendredi 16 juin 2006 Statut Membre Dernière intervention 5 octobre 2012 - 20 nov. 2006 à 00:43
Bonjour,

J'aimerais savoir comment faire et avoir un exemple en javascript (je suis assez nouveau dans le domaine de faire des sites) pour valider des cases à cocher en fonction d'un menu déroulant. Je m'explique:

J'ai un formulaire qui demande le nom, prénom etc.. ensuite j'ai un petit menu déroulant (valeur de 4 à 7) et à côté j'ai 7 petite cases à cocher, dans un premier temps l'utilisateur choisi dans le menu déroulant une valeur et en fonction de cette valeur coche les cases qu'il veut mais il ne peut en cocher que 4. Pas une, deux, trois, quatre ou cinq mais seulement 4.

Voici un des exemples: l'utilisateur choisi la valeur 4 il devra cocher 4 cases compris entre 1 et 4 parmis les 7 cases à cocher. Il coche les cases 1,2,3,4
                                   l'utilisateur choisi la valeur 5 il devra cocher 4 cases compris entre 1 et 5 parmis les 7 cases à cocher. Il coche les cases 1,2,4,5
                                  l'utilisateur choisi la valeur 6 il devra cocher 4 cases compris entre 1 et 6 parmis les 7 cases à cocher. Il coche les cases 2,3,4,6
                                 l'utilisateur choisi la valeur 7 il devra cocher 4 cases compris entre 1 et 7 parmis les 7 cases à cocher. Il coche les cases 1,2,3,7

Exemple de ce qu'il ne peut pas faire:

l'utilisateur choisi la valeur 5 il devra cocher 4 cases compris entre 1 et 5 parmis les 7 cases à cocher. Il ne peut pas cocher les cases 1,2,3,4 puisqu'il à choisi la valeur 5.
Et ainsi de suite....j'ai 8 menus déroulants spécifique (avec chacun leur 7 cases à cocher)

Merci beaucoup de votre aide.

14 réponses

Réponse 1 / 14
lavm01 Messages postés 69 Date d'inscription vendredi 16 juin 2006 Statut Membre Dernière intervention 5 octobre 2012
17 nov. 2006 à 18:18
Aussi peut-être avoir une alerte quand la personne se trompe.

Merci encore.
0
Réponse 2 / 14
rubiks10 Messages postés 224 Date d'inscription lundi 19 décembre 2005 Statut Membre Dernière intervention 6 juin 2007 3
17 nov. 2006 à 21:20
salut

euh... je ne comprends pas du tout ton exemple... pourquoi en choisissant la valeur 5 il ne peut pas cocher 1,2,3 et 4 ???

-- The Rubik's Man --
0
Réponse 3 / 14
lavm01 Messages postés 69 Date d'inscription vendredi 16 juin 2006 Statut Membre Dernière intervention 5 octobre 2012
17 nov. 2006 à 22:46
Peut-être que je me suis mal exprimé, ce site porte sur les seéries de hockey. Pourquoi en choisissant la valeur 5 il ne peut pas cocher 1,2,3 et 4 ??? parce que:

1. l'utilisateur choisi son équipe
2. choisi le nombre de partie (le menu déroulant)
3. choisi quelle partie l'équipe va gagner

Donc comme les séries sont des 4 de 7 (c'est pourquoi j'ai 7 cases à cocher). Donc en résumé si l'utilisateur choisi Montréal gagnant en 6 parties et gagne les parties 1,2,4,6

C'est pourquoi il ne pas choisir "gagne les parties 1,2,3,4" puisqu'il  à choisi que Montréal gagne en 6 parties et pour remporter le 4 de 7 il faut qu'il gagne 4 parties.
S'il gagne 4 parties de suite alors la prédiction aurait été Montréal gagne en 4 parties et gagne les parties 1,2,3,4

Je ne sais pas si c'est plus claire comme ça

Merci à l'avance.
0
Réponse 4 / 14
rubiks10 Messages postés 224 Date d'inscription lundi 19 décembre 2005 Statut Membre Dernière intervention 6 juin 2007 3
18 nov. 2006 à 02:32
Ok là c'est plus clair

Donc en fait si j'ai bien compris lorsque on choisit une valeur entre 4 et 7 dans le menu déroulant alors le checkbox qui a pour numéro la valeur choisie est obligatoirement coché ?? déja ca simplifie pas mal le code.

Ben j'attends ta réponse puis ensuite si j'ai le temps je te ferai le code car il n'y a rien de compliqué

-- The Rubik's Man --
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 14
rubiks10 Messages postés 224 Date d'inscription lundi 19 décembre 2005 Statut Membre Dernière intervention 6 juin 2007 3
18 nov. 2006 à 04:04
Encore moi....

Bon j'ai fait ton code.

Je me suis bien sur permis de rajouter des petites fonctions... lol
En fat j'ai rajouter le fait que le dernier checkbox est automatiquement coché et ne peux etre décoché.
Puis j'ai aussi rajouter le fait que lorsque on choisit en 4 parties alors les 4 checkbox sont automatiquement cochés et ne peuvent être décochés
Puis j'ai encore ajouté le fait que c'est lors des changements du menu déroulant que les checkbox sont crées... je m'explique : au départ aucun checkbox sont dans la page et si tu cliques sur 5 alors cela créer 5 checkbox... etc...

Voila tu n'as plus qu'à tester et adapter le tout pour ton système ( j'ai ici fais un exemple avec seulement 3 lignes mais tu peux faire un copier coller d'une ligne de la table pour rajouter des menus déroulant sans oublier de modifier les id respectif en incrémentant l'index)

voila le code :

<html>
 <head>
  <script type="text/javascript">
   function maj_checkbox(id,value) {
    var targetEl = document.getElementById(id+"_check");
    targetEl.innerHTML = '';
    if (value == -1) {
     targetEl.innerHTML = 'Choisissez un nombre de parties';
     return;
    }
    
    for(var i=1;i<=value;i++) {     var checked value 4 ? "checked" : (i == value ? "checked" : "");
     var tempID = id+"_check_";
     targetEl.innerHTML += "Partie "+i+"
";
    }
   }
   
   function checkClick(el,tempID,value,index) {    if (value 4 || index value) return false;
   
    if (!el.checked) return true;
    var numberChecked = 0;
    
    for (var i=1;i<=value;i++) {
     if (document.getElementById(tempID+i).checked)  numberChecked++;
    }
    
    if (numberChecked <= 4) return true;
    else return false;
   }
  </script>
 </head>
 
  <form>
       ----

           <select name="match1" onchange="maj_checkbox(this.name,this.value)">
       <option value="-1">Nbr parties</option>
       <option value="4">4 parties</option>
       <option value="5">5 parties</option>
       <option value="6">6 parties</option>
       <option value="7">7 parties</option>
      </select>
     ,
     Choisissez un nombre de parties,
    
    ----
&nbsp;,
    ----

           <select name="match2" onchange="maj_checkbox(this.name,this.value)">
       <option value="-1">Nbr parties</option>
       <option value="4">4 parties</option>
       <option value="5">5 parties</option>
       <option value="6">6 parties</option>
       <option value="7">7 parties</option>
      </select>
     ,
     Choisissez un nombre de parties,
    
    ----
&nbsp;,
    ----

           <select name="match3" onchange="maj_checkbox(this.name,this.value)">
       <option value="-1">Nbr parties</option>
       <option value="4">4 parties</option>
       <option value="5">5 parties</option>
       <option value="6">6 parties</option>
       <option value="7">7 parties</option>
      </select>
     ,
     Choisissez un nombre de parties,
    
   

  </form>
 
</html>

bonne prog

@+

-- The Rubik's Man --
0
Réponse 6 / 14
lavm01 Messages postés 69 Date d'inscription vendredi 16 juin 2006 Statut Membre Dernière intervention 5 octobre 2012
18 nov. 2006 à 05:48
Merci bien,
Je vais le tester d'ici demain et je te redonne des nouvelles.

merci encore, je suis certain que ça va marcher.
0
Réponse 7 / 14
lavm01 Messages postés 69 Date d'inscription vendredi 16 juin 2006 Statut Membre Dernière intervention 5 octobre 2012
18 nov. 2006 à 16:01
Merci pour le script, ça fonctionne à merveille mais il y a juste 2 petites choses:

1. Quand l'utilisateur a choisi le nombre de parties dans le menu déroulant, là tu fais fais afficher les cases à cocher mais j'aimerais les avoirs à l'horizontal (un à côté de l'autre) pas à la vertical.

2. Lorsque les cases à cocher apparaissent (je sais que la dernière partie est toujours cocher et c'est parfait) et que le nombre de partie est plus que 4, l'utilisateur peut quand même en cocher moins de 4 cases comment faire pour dire à l'utilisateur "tu as cocher seulement 3 cases il t'en manque une ou deux (selon le cas)"

Merci beaucoup The Rubik's Man

Si tu as des questions sur le language SAS,  je suis développeur SAS depuis plus de 20 ans. Il faut dire que je fais seulement du SAS (ou presque), c'est pourquoi je suis nouveau dans le domaine des scripts.

Merci encore de me répondre.
0
Réponse 8 / 14
rubiks10 Messages postés 224 Date d'inscription lundi 19 décembre 2005 Statut Membre Dernière intervention 6 juin 2007 3
18 nov. 2006 à 16:42
Oui donc pour les avoir a l'horizontal tu enleves le "
" a la fin de la ligne générée par javascript *
(cf." targetEl.innerHTML += "Partie ...........
")

Sinon oui c'est vrai j'ai oublier de faire la vérification du nombre de cases cochées, mais le problème est que je ne sais pas trop comment tu vas utiliser ton système...
Est-ce que l'utilisateur valide ensuite un formulaire ? ( je suppose que oui mais on sait jamais...)
Bon je vais te faire ca tout de suite (ca prend que 2 min ) et je te poste le code

-- The Rubik's Man --
0
Réponse 9 / 14
rubiks10 Messages postés 224 Date d'inscription lundi 19 décembre 2005 Statut Membre Dernière intervention 6 juin 2007 3
18 nov. 2006 à 17:42
Voila c'est fait donc j'ai résolu le fait que tu voulais les checkbox de facon horizontale

Donc en cliquant sur le bouton valider cela vérifie automatiquement tout puis j'ai fais la fonction de vérification de facon à ce qu'elle s'adapte toute seule au nombre d'élement ( par exemple dans mon exemple j'ai inséré que 3 modules et toi tu en as besoin de 8 ) donc quand tu vas rajouter les 5 autres tu n'auras pas à modifier cette fonction... voilà


D'ailleurs n'oublie pas lorsque tu vas rajouter les 5 autres modules de modifier pour chacun les id et name qui leurs correspondent en incrémentant pour chacun le chiffre les identifiant


voila le code final :


<html>
 <head>
  <script type="text/javascript">
   function maj_checkbox(id,value) {
    var targetEl = document.getElementById(id+"_check");
    targetEl.innerHTML = '';
    if (value == -1) {
     targetEl.innerHTML = 'Choisissez un nombre de parties';
     return;
    }
    
    for(var i=1;i<=value;i++) {     var checked value 4 ? "checked" : (i == value ? "checked" : "");
     var tempID = id+"_check_";
     targetEl.innerHTML += "Partie "+i+" ";
    }
   }
   
   function checkClick(el,tempID,value,index) {    if (value 4 || index value) return false;
   
    if (!el.checked) return true;
    var numberChecked = 0;
    
    for (var i=1;i<=value;i++) {
     if (document.getElementById(tempID+i).checked)  numberChecked++;
    }
    
    if (numberChecked <= 4) return true;
    else return false;
   }
   
   function verifForm(el) {    var i 1, j 1, checked = 0, check = null;
    while (document.getElementById(el.name+i)) {
     while (check = document.getElementById(el.name+i+'_check_'+j)) {
      if (check.checked) checked++;
      j++;
     }
     if (j == 1) {
      alert("Vous n'avez pas sélectionné un nombre de parties pour le match "+i);
      return;
     }
     else if (checked != 4) {
      var s = checked != 1 ? 's'  : '';
      if (checked == 0) alert("Vous avez coché aucune case pour le match "+i);
      else alert("Vous n'avez coché que "+checked+" case"+s+" pour le match "+i);
      return;
     }     i++;j 1;checked 0;
    }
    el.form.submit();
   }
  </script>
 </head>
 
  <form action="#">
       ----

     Match 1 :,
           <select id="match1" name="match1" onchange="maj_checkbox(this.name,this.value)">
       <option value="-1">Nbr parties</option>
       <option value="4">4 parties</option>
       <option value="5">5 parties</option>
       <option value="6">6 parties</option>
       <option value="7">7 parties</option>
      </select>
     ,
     Choisissez un nombre de parties,
    
    ----
&nbsp;,
    ----

     Match 2 :,
           <select id="match2" name="match2" onchange="maj_checkbox(this.name,this.value)">
       <option value="-1">Nbr parties</option>
       <option value="4">4 parties</option>
       <option value="5">5 parties</option>
       <option value="6">6 parties</option>
       <option value="7">7 parties</option>
      </select>
     ,
     Choisissez un nombre de parties,
    
    ----
&nbsp;,
    ----

     Match 3 :,
           <select id="match3" name="match3" onchange="maj_checkbox(this.name,this.value)">
       <option value="-1">Nbr parties</option>
       <option value="4">4 parties</option>
       <option value="5">5 parties</option>
       <option value="6">6 parties</option>
       <option value="7">7 parties</option>
      </select>
     ,
     Choisissez un nombre de parties,
    
    ----
&nbsp;,
    ----

           
     ,
    
   

  </form>
 
</html>

-- The Rubik's Man --
0
Réponse 10 / 14
lavm01 Messages postés 69 Date d'inscription vendredi 16 juin 2006 Statut Membre Dernière intervention 5 octobre 2012
18 nov. 2006 à 17:58
Merci, là c'est exactement ce que je voulais.

Merci encore The Rubik's Man

A+
0
Réponse 11 / 14
lavm01 Messages postés 69 Date d'inscription vendredi 16 juin 2006 Statut Membre Dernière intervention 5 octobre 2012
19 nov. 2006 à 20:30
Encore moi The Rubik's Man

J'ai encore une petite question, j'ai un autre menu déroulant à faire valider et je veux l'incorporer dans la validation actuelle. Le champ est un nom d'équipe tu peux aller voir sur http://cyberquebec.ca/poolseries  dans inscription (c'est seulement ça qui est fait), je suis certain que tu vas comprendre.
Encore merci !
Voici le dernier code que tu m'as transmis:

<html>
 <head>
  <script type="text/javascript">
   function maj_checkbox(id,value) {
    var targetEl = document.getElementById(id+"_check");
    targetEl.innerHTML = '';
    if (value == -1) {
     targetEl.innerHTML = 'Choisissez un nombre de parties';
     return;
    }
   
    for(var i=1;i<=value;i++) {     var checked value 4 ? "checked" : (i == value ? "checked" : "");
     var tempID = id+"_check_";
     targetEl.innerHTML += "Partie "+i+" ";
    }
   }
  
   function checkClick(el,tempID,value,index) {    if (value 4 || index value) return false;
  
    if (!el.checked) return true;
    var numberChecked = 0;
   
    for (var i=1;i<=value;i++) {
     if (document.getElementById(tempID+i).checked)  numberChecked++;
    }
   
    if (numberChecked <= 4) return true;
    else return false;
   }
  
   function verifForm(el) {    var i 1, j 1, checked = 0, check = null;
    while (document.getElementById(el.name+i)) {
     while (check = document.getElementById(el.name+i+'_check_'+j)) {
      if (check.checked) checked++;
      j++;
     }
     if (j == 1) {
      alert("Vous n'avez pas sélectionné un nombre de parties pour le match "+i);
      return;
     }
     else if (checked != 4) {
      var s = checked != 1 ? 's'  : '';
      if (checked == 0) alert("Vous avez coché aucune case pour le match "+i);
      else alert("Vous n'avez coché que "+checked+" case"+s+" pour le match "+i);
      return;
     }     i++;j 1;checked 0;
    }
    el.form.submit();
   }
  </script>
 </head>
 
  <form action="#">
       ----

     Match 1 :,
           <select id="match1" name="match1" onchange="maj_checkbox(this.name,this.value)">
       <option value="-1">Nbr parties</option>
       <option value="4">4 parties</option>
       <option value="5">5 parties</option>
       <option value="6">6 parties</option>
       <option value="7">7 parties</option>
      </select>
    ,
     Choisissez un nombre de parties,
   
    ----
&nbsp;,
    ----

     Match 2 :,
           <select id="match2" name="match2" onchange="maj_checkbox(this.name,this.value)">
       <option value="-1">Nbr parties</option>
       <option value="4">4 parties</option>
       <option value="5">5 parties</option>
       <option value="6">6 parties</option>
       <option value="7">7 parties</option>
      </select>
    ,
     Choisissez un nombre de parties,
   
    ----
&nbsp;,
    ----

     Match 3 :,
           <select id="match3" name="match3" onchange="maj_checkbox(this.name,this.value)">
       <option value="-1">Nbr parties</option>
       <option value="4">4 parties</option>
       <option value="5">5 parties</option>
       <option value="6">6 parties</option>
       <option value="7">7 parties</option>
      </select>
    ,
     Choisissez un nombre de parties,
   
    ----
&nbsp;,
    ----

          
    ,
   
  

  </form>
 
</html>

Merci de me répondre !
0
Réponse 12 / 14
rubiks10 Messages postés 224 Date d'inscription lundi 19 décembre 2005 Statut Membre Dernière intervention 6 juin 2007 3
19 nov. 2006 à 21:55
ok jte ferai ca demain après midi car là je suis overbooké!!!

-- The Rubik's Man --
0
Réponse 13 / 14
rubiks10 Messages postés 224 Date d'inscription lundi 19 décembre 2005 Statut Membre Dernière intervention 6 juin 2007 3
19 nov. 2006 à 23:00
Bon voilà c'est fait.
Par contre tu vas devoir faire des modifications dans ton code html car tu as fais des erreurs de syntaxes sur les balises select.

Bon alors pour tous les select de choix d'équipe tu vas utiliser cette syntaxe :

<select id="team1" name="team1">
   <option value="-1">??????????</option>
   <option value="Montréal">Montréal</option>
   <option value="Caroline">Caroline</option>
</select>
puis la meme chose en changeant le team1 vers team2 puis team3 etc...
n'oublie pas de mettre les propriétés value dans chaque option et n'oublie pas de fermer la balise avec </option>

voilà puis voilà la nouvelle fonction de vérification :

function verifForm(el) {
    if(inscription.prenom.value == "") {
     alert('Le champ prénom est vide !!');
     return;
    }
    if(inscription.nom.value == "") {
     alert('Le champ nom est vide !!');
     return;
    }    var i 1, j 1, checked = 0, check = null;
    while (document.getElementById(el.name+i)) {
  if (document.getElementById('team'+i).value == -1) {
  alert("Vous n'avez pas sélectionné une équipe pour le MATCH #"+i);
  return;
  }
     while (check = document.getElementById(el.name+i+'_check_'+j)) {
      if (check.checked) checked++;
      j++;
     }
     if (j == 1) {
      alert("Vous n'avez pas sélectionné un nombre de parties pour le MATCH #"+i);
      return;
     }
     else if (checked != 4) {
      var s = checked != 1 ? 's'  : '';
      if (checked == 0) alert("Vous avez coché aucune case pour le MATCH #"+i);
      else alert("Vous n'avez coché que "+checked+" case"+s+" pour le MATCH #"+i);
      return;
     }     i++;j 1;checked 0;
    }
    el.form.submit();
   }

@+

-- The Rubik's Man --
0
Réponse 14 / 14
lavm01 Messages postés 69 Date d'inscription vendredi 16 juin 2006 Statut Membre Dernière intervention 5 octobre 2012
20 nov. 2006 à 00:43
Super, Merci, tu es super gentil, je commence à comprendre un peu le javascript surtout avec le script que tu m'as fais.

Encore merci, ça fonctionne à merveille.
A+ peut-être.
0

Discussions similaires

Turbo C++
cs_jrod -
cmarsc -

1 réponse
Etablir toutes les combinaisons possibles du Lotto
KBNchapal -
Mikaels35 -

6 réponses
TURBO C++ et blocks que choisir
norman bates -
Vale Erian -

1 réponse
Affichage numeros loto
cs_magnum73 -
magnum73 -

2 réponses
turbo assembleur 5.0
cs_andromida -
patatalo -

42 réponses
Rejoignez-nous