Validation de formulaire jQuery avancée (3) : ajouter une règle conditionnelle à un ensemble de cases à cocher

Le troisième article de cette série sur la validation avancée de formulaire jQuery traite des déclencheurs conditionnels. Dans ce cas particulier, nous avons un déclencheur conditionnel présenté sous la forme d'un bouton radio qui rend obligatoire la saisie d'un ensemble de cases à cocher lorsqu'il est activé, et optionnelle lorsqu'il ne l'est pas.

Toutes les cases à cocher partagent le même nom checkBoxesName[]. Notez les crochets : comme nous les traitons en PHP côté serveur, le regroupement via leur nom se fait de cette façon.

Pour appliquer une règle de validation à l'ensemble des cases à cocher, on utilise aussi les crochets (puisqu'il font partie de l'attribut name), aussi les apostrophes simples sont elles utilisées pour délimiter leur nom dans les règles du validateur.

Puisque les cases à cocher ne sont obligatoires que si le déclencheur conditionnel est activé, cette condition est exprimée sous la forme d'une fonction associée au paramètre required de la règle correspondante. Cette fonction renvoie True si le bouton radio dont l'identifiant est conditionalTriggerActivatedId est sélectionné, et False dans le cas contraire.

Tant que cette fonction retourne un booléen, elle peut être composée d'un algorithme aussi complexe que l'on veut, comme une série de champs en cascade avec des valeurs spécifiques sous la forme d'une expression booléenne complexe (la seule limite est ici votre imagination, ou plutôt la complexité du formulaire).

L'identifiant de formulaire utilisé comme second paramètre dans l'expression booléenne $("#conditionalTriggerActivatedId", "#myFormId").attr("checked") constitue son contexte. Il dit à jQuery dans quel contexte trouver l'élément d'identifiant conditionalTriggerActivatedId, c'est-à-dire qu'il va le chercher dans le scope (en français, la portée lexicale) de l'élément d'identifiant myFormId. C'est une bonne façon d'accélérer le traitement, et plus le contexte est réduit, meilleur c'est.

<form id="myFormId" method="post">
    <div id="conditionalTriggerDiv">
        <input type="radio" name="conditionalTrigger" id="conditionalTriggerActivatedId" value="y" checked="checked" />Déclencheur conditionnel activé<br/>
        <input type="radio" name="conditionalTrigger" id="conditionalTriggerNotActivatedId" value="n" />Déclencheur conditionnel desactivé<br/>
    </div>
    <div id="conditionalTriggerActivatedDiv">
        <input type="checkBox" id="checkBoxesIdOne" name="checkBoxesName[]" value="1" />Première case à cocher<br/>
        <input type="checkBox" id="checkBoxesIdTwo" name="checkBoxesName[]" value="2" />Deuxième case à cocher<br/>
        <input type="checkBox" id="checkBoxesIdThree" name="checkBoxesName[]" value="3" />Troisième case à cocher<br/>
    </div>
    <input type="submit" value="Envoyer" />
</form>

$(document).ready(function(){
    $("#myFormId").validate({
        rules: {
            'checkBoxesName[]': {
                required: function() {
                            return $("#conditionalTriggerActivatedId", "#myFormId").attr("checked");
                        }
            }
        }
    });
});

Si nous arrêtons le code ici, le message d'erreur associé au caractère obligatoire de l'ensemble des cases à cocher sera affiché juste après la première d'entre-elles, c'est-à-dire entre la première case à cocher et son libellé. La clé errorPlacement s'utilise pour dire où afficher le message d'erreur. Elle va donc maintenant afficher ce message après la div qui contient les cases à cocher, et tout autre message d'erreur potentiel après l'élément auquel il se rapporte (affichage par défaut).

$("#myFormId").validate({
    rules: {
        'checkBoxesName[]': {
            required: function() {
                        return $("#conditionalTriggerActivatedId", "#myFormId").attr("checked");
                    }
        }
    },
    errorPlacement: function(error, element) {
        if (element.attr("name") == "checkBoxesName[]") {
            error.insertAfter("#conditionalTriggerActivatedDiv", "#myFormId");
        }
        else {
            error.insertAfter(element);
        }
    }
});

Advanced jQuery Form validation (3): Add conditional requirement rule for a set of checkboxes (en anglais)
Validación de formulario jQuery avanzado (3): añadir una regla condicional a un conjunto de casillas de verificación (en espagnol)
Validação de formulário jQuery avançado (3): adicionar uma regra condicional à um conjunto de caixas de seleção (en portugais)