Validación de formulario jQuery avanzado (3): añadir una regla condicional a un conjunto de casillas de verificación

El tercer artículo de esta serie sobre la validación avanzada de formularios jQuery trata de los activadores condicionales. En este caso particular, tenemos un activador condicional presentado en la forma de un botón de opción que hace obligatorio el picado de un conjunto de casillas de verificación cuando está activado, y opcional cuando no lo está.

Todas las casillas de verificación comparten el mismo nombre checkBoxesName[]. Tenga en cuenta los corchetes: como los tratamos en PHP en el lado del servidor, la agrupación a través de su nombre se hace de esta manera.

Para aplicar una regla de validación al conjunto de casillas de verificación, también utilizamos los corchetes (como hacen parte del atributo name), así utilizamos las comillas simples para delimitar su nombre en las reglas del validador.

Dado que las casillas son obligatorias sólo si el activador condicional está activado, esta condición se expresa como una función asociada con el parámetro required de la regla correspondiente. Esta función devuelve True si el botón de opción cuyo identificador es conditionalTriggerActivatedId está seleccionado, y False en el caso contrario.

Siempre y cuando esta función devuelve un booleano, puede estar compuesta por un algoritmo tan complejo que sea posible, como una serie de campos en cascada con valores específicos en la forma de una expresión booleana compleja (el único límite aquí es su imaginación, o más bien la complejidad del formulario).

El identificador del formulario utilizado como segundo parámetro de la expresión booleana $("#conditionalTriggerActivatedId", "#myFormId").attr("checked") es su contexto. Dice a jQuery en cual contexto encontrar el elemento de identificador conditionalTriggerActivatedId, es decir, que lo buscará en el ámbito (en inglés, el scope) del elemento de identificador myFormId. Es una buena manera de acelerar el procesamiento, y más se reduce el contexto, mejor.

<form id="myFormId" method="post">
    <div id="conditionalTriggerDiv">
        <input type="radio" name="conditionalTrigger" id="conditionalTriggerActivatedId" value="y" checked="checked" />Activador condicional activado<br/>
        <input type="radio" name="conditionalTrigger" id="conditionalTriggerNotActivatedId" value="n" />Activador condicional desactivado<br/>
    </div>
    <div id="conditionalTriggerActivatedDiv">
        <input type="checkBox" id="checkBoxesIdOne" name="checkBoxesName[]" value="1" />Primera casilla de verificaciòn<br/>
        <input type="checkBox" id="checkBoxesIdTwo" name="checkBoxesName[]" value="2" />Segunda casilla de verificaciòn<br/>
        <input type="checkBox" id="checkBoxesIdThree" name="checkBoxesName[]" value="3" />Tercera casilla de verificaciòn<br/>
    </div>
    <input type="submit" value="Enviar" />
</form>

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

Si nos detenemos aquí el código, el mensaje de error asociado al carácter obligatorio del conjunto de casillas de verificación se mostrará justo después de la primera de ellas, es decir, entre la primera casilla de verificación y su etiqueta.

La clave errorPlacement se utiliza para decir onde mostrar el mensaje de error. Por lo tanto, va muestrar ahora este mensaje después de la div que contiene las casillas de verificación, y cualquier otro mensaje potencial de error después del elemento al que se refiere (visualización por defecto).

$("#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 inglés)
Validation de formulaire jQuery avancée (3) : ajouter une règle conditionnelle à un ensemble de cases à cocher (en francés)
Validação de formulário jQuery avançado (3): adicionar uma regra condicional à um conjunto de caixas de seleção (en portugués)