IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Vérifier que chaque checkbox d'un formulaire soit cochée.


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2019
    Messages : 28
    Par défaut Vérifier que chaque checkbox d'un formulaire soit cochée.
    Bonjour à tous;

    Je cherche une fonction Javascript me permettant de vérifier si chacun de mes checkbox inclus dans mon formulaire soit coché (et faire un focus sur celle-ci).

    Mes checkbox ont toutes le même nom, mais j'ai vu sur le internet que l'on pouvait faire un tableau etc. avec comme nom="checkbox[i]. Je n'ai pas bien compris la méthode, je voulais savoir s'il y avait une autre méthode plus simple, ou si c'était la seule (et si on pouvait me l'expliquer SVP).

    Merci d'avance pour votre temps.
    Bonne journée !

  2. #2
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Par défaut
    Bonjour,
    pour comprendre l’aspect « formulaire HTTP classique » des checkboxes, le mieux est encore de tester toi-même :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <form method="get" action="testform.php">
      <input type="checkbox" name="machin[]" />
      <input type="checkbox" name="machin[]" />
      <input type="checkbox" name="machin[]" />
     
      <input type="submit" />
    </form>
    Le script testform.php qui reçoit les données :
    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <?php
    header('Content-Type: text/plain; charset=utf-8');
    ini_set('html_errors', '0');
     
    print_r($_GET);

    Dans ce premier exemple, il y a trois checkboxes avec le même nom machin[], le serveur les affiche sous la forme d’un tableau machin ayant 0 à 3 valeurs. Les valeurs, quand elles sont présentes, sont la chaîne "on" par défaut quand les checkboxes n’ont pas d’attribut value.

    Ajoutons donc des attributs value pour voir ce que ça donne :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <form method="get" action="testform.php">
      <input type="checkbox" name="machin[]" value="pomme" />
      <input type="checkbox" name="machin[]" value="fraise" />
      <input type="checkbox" name="machin[]" value="rhubarbe" />
     
      <input type="submit" />
    </form>
    On obtient par exemple ceci :
    Code texte : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    Array
    (
        [machin] => Array
            (
                [0] => fraise
                [1] => rhubarbe
            )
     
    )
    Pour avoir une information sur l’ordre des checkboxes, tu peux rajouter des trucs entre les crochets. Souvent on met des nombres mais on peut aussi mettre des lettres, et sans doute d’autres caractères tant que ça ne modifie pas la syntaxe.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <form method="get" action="testform.php">
      <input type="checkbox" name="machin[0]" value="pomme" />
      <input type="checkbox" name="machin[1]" value="fraise" />
      <input type="checkbox" name="machin[2]" value="rhubarbe" />
     
      <input type="submit" />
    </form>

    Ou encore :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <form method="get" action="testform.php">
      <input type="checkbox" name="machin[a]"     value="pomme" />
      <input type="checkbox" name="machin[magie]" value="fraise" />
      <input type="checkbox" name="machin[42]"    value="rhubarbe" />
     
      <input type="submit" />
    </form>




    En ce qui concerne le JavaScript, tu peux utiliser querySelectorAll() pour obtenir facilement une collection de toutes les checkboxes de ton formulaire :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    const monForm =  ... ;
    const mesCheckboxes = monForm.querySelectorAll("input[type='checkbox']");
    Pour parcourir cette collection, il y a plusieurs façons de faire. Je te propose d’utiliser une boucle for...of :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    for (const cb of mesCheckboxes) {
      ...
    }
    Au sein de cette boucle, tu peux tester la propriété checked de la checkbox représentée par la variable cb. Reste à savoir à qui donner le focus, car un seul élément peut avoir le focus à la fois. Je propose d’utiliser une variable booléenne focusDejaDonne.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    let focusDejaDonne = false;
    for (const cb of mesCheckboxes) {
      if (!cb.checked && !focusDejaDonne) {
        cb.focus();
        focusDejaDonne = true;
      }
    }
    Pour finir, j’imagine que tu auras envie d’ajouter un message à côté d’une checkbox non cochée. Tu peux utiliser insertAdjacentElement() ou insertAdjacentHTML(). Si tu veux remonter l’arbre HTML, tu peux également combiner ces méthodes avec parentElement ou encore closest().

    La méthode scrollIntoView() pourrait t’intéresser également.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2019
    Messages : 28
    Par défaut
    Bonjour,

    Franchement un grand merci, bien détaillé, bien expliqué !
    Cela fonctionne très bien pour moi c'est parfait !

    Bonne journée a toi !!

  4. #4
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2019
    Messages : 28
    Par défaut
    Juste une petite question,

    Lorsque j'utilise la fonction insertAdjacentElement ou insertAdjacentHTML avant mon return false,
    Il ne prend pas en compte ni mon return false, ni mon insert.
    Alors que lorsqu'il y a simplement mon return false, il me fait mon focus.

    Une idée SVP ?

  5. #5
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Par défaut
    Sans doute une erreur de syntaxe. Je peux voir ton code ?
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  6. #6
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2019
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2019
    Messages : 28
    Par défaut
    Oui je pense, j'ai supprimé du coup cette fonction de mon code, mais surement si tu l'appliques avec tes compétences tu sauras mieux l'intégrer que moi j'en suis sur !

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    function ValidePourMail() {
     
        if ((document.forms['annexe'].elements["checkbox20"].checked != true)) {
            alert("Vous n'avez pas coché la dernière case qui certifie que vous avez respectez la charte");
            return false;
     
        } else {
     
            const monForm = document.forms["annexe"];
            const mesCheckboxes = monForm.querySelectorAll("input[type='checkbox']");
            let focusDejaDonne = false;
            for (const cb of mesCheckboxes) {
                if (!cb.checked && !focusDejaDonne) {
                    alert("Une case n'est pas coché ");
                    cb.focus();
                    focusDejaDonne = true;
                    if (confirm("Vous voulez vraiment poursuivre ?")) {
                        return true;
                    } else {
                       // Code fonction
                        return false;
                    }
                }
            }
     
        }
    J'aimerais intégrer cette fonction juste au dessus du return false si possible.

Discussions similaires

  1. Vérifier que chaque ligne de mon fichier fini par ";"
    Par oliviernouhi dans le forum Langage
    Réponses: 2
    Dernier message: 18/04/2011, 16h54
  2. Ne vérifier que certains champs de mon formulaire
    Par cdevl32 dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 17/08/2008, 15h18
  3. Vérifier que tous les champs du formulaire soient bien remplis
    Par arnaudperfect dans le forum Langage
    Réponses: 3
    Dernier message: 25/08/2007, 11h59
  4. Comment vérifier que la valeur d'un champ soit unique?
    Par le lynx dans le forum MS SQL Server
    Réponses: 4
    Dernier message: 04/05/2005, 14h11
  5. Réponses: 11
    Dernier message: 27/03/2005, 15h13

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo