Validación de formulario jQuery avanzado (4): mostrar un mensaje de error para campos agrupados

Después de descubrir los activadores condicionales y de aprender donde mostrar los mensajes de error, vamos hoy visualizar un mensaje de error para campos agrupados.

En este ejemplo, dos campos están relacionados, y sólo uno de ellos es obligatorio. En otras palabras, cada uno de estos dos campos es obligatorio si el otro está vacío. Estos dos campos pueden ser de cualquier tipo. Interesamonos aquí a un campo de entrada de texto simple y a un textarea. Por supuesto, habríamos podido utilizar un botón de radio para indicar este comportamiento específico, pero preferimos aquí mantener la interfaz la más ligera y simple posible, limitando el número de elementos.

El formulario es bastante simple. Definimos un div alrededor de los dos campos relacionados para mostrar el mensaje de error después de cada uno de ellos. Idealmente, un poco de estilo CSS debería ser aplicado para mostrar la proximidad de estos dos campos más obvia.

<form id="myFormId" method="post">
    <div id="groupDiv">
        <label for="textFieldId">Una línea de texto</label>
        <input type="text" name="textField" id="textFieldId" value="" /><br/>
        <label for="textAreaId">Varias líneas de texto</label>
        <textarea name="textArea" id="textAreaId"></textarea>
    </div>
    <input type="submit" value="Enviar" />
</form>

El validador define oneOfTwo como un elemento agrupado incluyendo al mismo tiempo el campo de entrada sencillo y el textarea. Las llaves rules, messages y errorPlacement usan no obstante los nombres de los elementos por separado.

$("#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, o introduzca una línea de texto, o copie y pegue su texto en el campo de entrada.',
            textArea: 'Por favor, o introduzca una línea de texto, o copie y pegue su texto en el 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 (en inglés)
Validation de formulaire jQuery avancée (4) : affichage d'un message d'erreur pour des champs groupés (en francés)
Validação de formulário jQuery avançado (4): a mostra de uma mensagem de erro para campos agrupados (en portugués)