Nel precedente articolo (Creare un validatore custom AlloyUI riusabile) abbiamo visto come realizzare un validatore custom riusabile con AlloyUI; sfruttando il medesimo principio, voglio mostrarvi come effettuare la validazione di una combo integrandosi al validatore del form.

Il problema principale legato alla validazione di una combo sta nel fatto che non è possibile inserire la taglib aui:validator all'interno della aui:select; pertanto l'unico modo per risolvere il problema sarebbe quello di agganciarsi all'evento change della combo, senza però integrarsi con la validazione del form, a meno di scrivere tanto ed inutile codice Javascript.

Grazie alla funzione A.mix, che abbiamo già visto in precedenza, è possibile risolvere il problema in maniera molto più elegante.

Come prima cosa dobbiamo definire la nostra regola di validazione custom ed aggiungerla al validatore di Liferay, ma questo già lo sappiamo fare.

AUI().use('aui-form-validator', function(A) {
    var defaultFormValidator = A.config.FormValidator;

    A.mix(
        defaultFormValidator.RULES,
        {
            myFunc: function (value, fieldNode, ruleValue) {
                // Codice di validazione che restituisce true/false
            },
        },
        true
    );

    A.mix(
        defaultFormValidator.STRINGS,
        {
            myFunc: Liferay.Language.get('please-select-a-valid-value')
        },
        true
    );
});

Per maggiore chiarezza rivediamo come funziona la funzione A.mix:

1. viene recuperata l'istanza di configurazione dell'oggetto globale FormValidator di AlloyUI; dopodichè, tramite la funzione mix vengono iniettate nuove funzionalità all'interno del validatore;
2. la prima invocazione della funzione mix serve per aggiungere alle regole del validatore (campo RULES) una nuova funzione di validazione chiamata myFunc;
3. la seconda invocazione della funzione mix serve invece per aggiungere ai messaggi del validatore (campo STRINGS) una nuova traduzione per il messaggio di errore; la chiave di traduzione dovrà poi essere definita a livello di portale e non di plugin, quindi nel file Portal.properties;
4. il terzo parametro booleano true di ciascuna chiamata serve solamente a sovrascrivere eventuali definizioni omonime già presenti.

A questo punto, non potendo utilizzare la taglib aui:validator, è necessario recuperare via codice le regole associate al campo del form che si vuole validare ed aggiungere la regola custom.

var myRules = {
    required: true,
    myFunc: true
};

var form = Liferay.Form.get('<portlet:namespace />fm');
var formRules = form.formValidator.get('rules');

formRules['<portlet:namespace/>myCombo'] = myRules;

Innanzitutto creiamo un semplice oggetto myRules in cui i nomi dei campi sono i nomi delle regole di validazione che vogliamo applicare (required e myFunc); dopodichè recuperiamo l'istanza del form che dobbiamo validare e successivamente l'oggetto che rappresenta tutte le regole di validazione associate, formRules.

Questo oggetto non è altro che un array associativo in cui le chiavi sono rappresentate dai nomi dei campi del form, mentre i valori sono le regole da applicare; pertanto è sufficiente assegnare l'oggetto myRules al campo corretto.

Buon divertimento!