Validação de formulário jQuery avançado (4): a mostra de uma mensagem de erro para campos agrupados

Depois de descobrir os gatilhos condicionais e de aprender onde mostrar as mensagens de erro, vamos hoje ver uma mensagem de erro para campos agrupados.

Neste exemplo, dois campos estão relacionados, e apenas um deles é obrigatório. Noutras palavras, cada um destes dois campos é obrigatório se o outro estar vazio. Estes dois campos podem ser de qualquer tipo. Nós interessemos aqui a um campo de entrada de texto simples e a um textarea. Com certeza, poderiamos ter usado um botão de rádio para indicar este comportamento específico, mas nós preferimos aqui manter a interface a mais leve e simples possível, limitando o número de elementos.

O formulário é muito simples. Definimos uma div em torno dos dois campos relacionados para mostrar a mensagem de erro após cada um deles. Idealmente, algum estilo CSS deveria ser aplicado para mostrar a proximidade destes dois campos mais óbvia.

<form id="myFormId" method="post">
    <div id="groupDiv">
        <label for="textFieldId">Uma linha de texto</label>
        <input type="text" name="textField" id="textFieldId" value="" /><br/>
        <label for="textAreaId">Várias linhas de texto</label>
        <textarea name="textArea" id="textAreaId"></textarea>
    </div>
    <input type="submit" value="Enviar" />
</form>

O validador define oneOfTwo como um elemento agrupado incluindo ao mesmo tempo o campo de entrada simples e o textarea. As chaves rules, messages e errorPlacement usam no entanto os nomes dos elementos separadamente.

$("#myFormId").validate({
        groups: {
            oneOfTwo: "textField textArea"
        },
        rules: {
            textField: { required: function() { return ($("#textFieldId", "#myFormId").val().length == 0); } },
            textArea: { required: function() { return ($("#textAreaId", "#myFormId").val().length == 0); } }
        },
        messages: {
            textField: 'Por favor, quer insira uma linha de  texto, quer copie e cole o seu texto no campo de entrada.',
            textArea: 'Por favor, quer insira uma linha de  texto, quer copie e cole o seu texto no campo de entrada.',
        },
        errorPlacement: function(error, element) {
            if ((element.attr("name") == "textField") || (element.attr("name") == "textArea")) {
                error.insertAfter("#groupDiv", "#myFormId");
            }
            else {
                error.insertAfter(element);
            }
        }
});

Advanced jQuery Form validation (4): Display error message for grouped fields (em inglês)
Validation de formulaire jQuery avancée (4) : affichage d'un message d'erreur pour des champs groupés (em francês)
Validación de formulario jQuery avanzado (4): mostrar un mensaje de error para campos agrupados (em espanhol)