Validação de formulário jQuery avançado (3): adicionar uma regra condicional à um conjunto de caixas de seleção

O terceiro artigo desta série sobre a validação avançada de formulários jQuery trata dos gatilhos condicionais. Neste caso particular, temos um gatilho condicional apresentado na forma de um botão de opção que torna obrigatória a seleção de um conjunto de caixas de seleção quando ativado, e opcional quando não estiver.

Todas as caixas de seleção compartilham o mesmo nome checkBoxesName[]. Tenha en conta os parênteses retos: como os tratamos em PHP do lado do servidor, o agrupamento através do seu nome faz-se desta maneira.

Para aplicar uma regra de validação ao conjunto de caixas de seleção, também usamos os parênteses (como fazem parte do atributo name), assim usamos as aspas simples para delimitar o seu nome nas regras do validador.

Visto que as caixas estão obrigatórias só se o gatilho condicional está ativado, esta condição exprime-se como uma função associada com o parâmetro required da regra correspondente. Esta função retorna True se o botão de rádio cujo identificador é conditionalTriggerActivatedId está selecionado, e False no caso contrário.

Tanto quanto esta função retorna um booleano, pode estar composta por um algoritmo tão complexo quanto possível, como uma série de campos em cascata com valores específicos na forma de uma expressão booleana complexa (o único limite aqui é a sua imaginação, ou melhor, a complexidade do formulário).

O identificador do formulário usado como segundo parâmetro da expressão booleana $("#conditionalTriggerActivatedId", "#myFormId").attr("checked") é o seu contexto. Diz a jQuery em que contexto encontrar o elemento de identificador conditionalTriggerActivatedId, a saber, que vai procurá-lo no escopo do elemento de identificador myFormId. É uma boa maneira de acelerar o processamento, e quando mais se reduz o contexto, melhor.

<form id="myFormId" method="post">
    <div id="conditionalTriggerDiv">
        <input type="radio" name="conditionalTrigger" id="conditionalTriggerActivatedId" value="y" checked="checked" />Gatilho condicional ativado<br/>
        <input type="radio" name="conditionalTrigger" id="conditionalTriggerNotActivatedId" value="n" />Gatilho condicional desativado<br/>
    </div>
    <div id="conditionalTriggerActivatedDiv">
        <input type="checkBox" id="checkBoxesIdOne" name="checkBoxesName[]" value="1" />Primeira caixa de seleção<br/>
        <input type="checkBox" id="checkBoxesIdTwo" name="checkBoxesName[]" value="2" />Segunda caixa de seleção<br/>
        <input type="checkBox" id="checkBoxesIdThree" name="checkBoxesName[]" value="3" />Terceira caixa de seleção<br/>
    </div>
    <input type="submit" value="Enviar" />
</form>

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

Se pararmos aqui o código, a mensagem de erro associado ao caráter obrigatório do conjunto de caixas de seleção mostrar-se-á logo após da primeira delas, ou seja, entre a primeira caixa de seleção e a sua etiqueta.

A chave errorPlacement usa-se para dizer onde mostrar a mensagem de erro. Portanto, vai mostrar agora esta mensagem após da div contendo as caixas de seleção, e qualquer outra mensagem potencial de erro após do elemento ao que se refere (visualização por padrão).

$("#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 (em inglês)
Validación de formulario jQuery avanzado (3): añadir una regla condicional a un conjunto de casillas de verificación (em espanhol)
Validation de formulaire jQuery avancée (3) : ajouter une règle conditionnelle à un ensemble de cases à cocher (em francês)