Validation de formulaire jQuery avancée (4) : affichage d'un message d'erreur pour des champs groupés

Après avoir découvert les déclencheurs conditionnels et avoir appris où afficher les messages d'erreur, nous allons aujourd'hui afficher un message d'erreur pour des champs groupés.

Dans cet exemple, deux champs sont apparentés, et seul l'un d'entre-eux est obligatoire. En d'autres mots, chacun de ces deux champs est obligatoire si l'autre est vide. Ces deux champs peuvent être de n'importe quel type. Nous nous intéressons ici à un champ de saisie textuelle simple et à un textarea. Bien sûr, nous aurions pu utiliser un bouton radio pour indiquer ce comportement spécifique, mais nous préférons ici garder l'interface la plus légère et simple possible en limitant le nombre de ses éléments.

Le formulaire est assez simple. Nous définissons un div autour des deux champs apparentés afin d'afficher le message d'erreur après chacun d'eux. Idéalement, un peu de style CSS devrait être appliqué pour rendre la proximité de ces deux champs plus évidente.

<form id="myFormId" method="post">
    <div id="groupDiv">
        <label for="textFieldId">Une ligne de texte</label>
        <input type="text" name="textField" id="textFieldId" value="" /><br/>
        <label for="textAreaId">Plusieurs lignes de texte</label>
        <textarea name="textArea" id="textAreaId"></textarea>
    </div>
    <input type="submit" value="Envoyer" />
</form>

Le validateur définit oneOfTwo en tant qu'élément groupé comprenant à la fois le champ de saisie simple et le textarea. Les clés rules, messages et errorPlacement utilisent néanmoins les noms des éléments séparément.

$("#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: 'Veuillez soit entrer une ligne de texte, soit copier/coller votre texte dans la zone de saisie.',
            textArea: 'Veuillez soit entrer une ligne de texte, soit copier/coller votre texte dans la zone de saisie.',
        },
        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 anglais)
Validación de formulario jQuery avanzado (4): mostrar un mensaje de error para campos agrupados (en espagnol)
Validação de formulário jQuery avançado (4): a mostra de uma mensagem de erro para campos agrupados (en portugais)