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
:
- viene recuperata l'istanza di configurazione dell'oggetto globale
FormValidator
di AlloyUI; dopodichè, tramite la funzionemix
vengono iniettate nuove funzionalità all'interno del validatore; - la prima invocazione della funzione
mix
serve per aggiungere alle regole del validatore (campoRULES
) una nuova funzione di validazione chiamatamyFunc
; - la seconda invocazione della funzione
mix
serve invece per aggiungere ai messaggi del validatore (campoSTRINGS
) 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 filePortal.properties
; - 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!