Il framework AlloyUI integrato all'interno di Liferay mette a disposizione un sistema molto potente e flessibile per la validazione di un form: vengono infatti forniti alcuni validatori di default (required, url, email, ...) e viene anche data la possibilità di creare validatori custom contenenti le proprie logiche applicative.
Nel caso in cui fosse necessario riutilizzare più volte lo stesso validatore custom, si correrebbe il rischio di duplicare codice in giro per l'applicazione; vediamo quindi un metodo molto interessante per definire un validatore custom riusabile.
Supponiamo quindi di voler realizzare un validatore custom per validare un indirizzo Gmail obbligatorio; normalmente sarebbe una cosa del genere:
<aui:input name="emailAddress" required="true">
<aui:validator name="email" />
<aui:validator name="custom" errorMessage="please-enter-a-valid-gmail-address">
function (value, node) {
if(value.endsWith('@ gmail.com'))
return true;
else
return false;
}
</aui:validator>
</aui:input>
Il codice è abbastanza semplice da capire, ci sono 3 validatori ciascuno che svolge il proprio compito:
required, controlla che il campo venga compilato;email, controlla che il campo sia una mail corretta;custom, controlla che la mail sia di Gmail.
Ma se volessimo riusare il validatore custom (immaginiamo anche che sia più complesso) dovremmo copiare il codice ogni volta. Non sarebbe molto più figo se invece potessimo fare questo?
<aui:input name="emailAddress" required="true">
<aui:validator name="email" />
<aui:validator name="gmail" />
</aui:input>
Possiamo farlo! E solo con qualche riga di codice Javascript.
Tutto il codice che vi farò vedere è da considerarsi globale (se vogliamo che sia riusabile) quindi lo andremo ad inserire all'interno del file main.js del nostro plugin, oppure direttamente nel tema.
AUI().use('aui-form-validator', function(A) {
var defaultFormValidator = A.config.FormValidator;
A.mix(
defaultFormValidator.RULES,
{
gmail: function (value, fieldNode, ruleValue) {
if(undefined == value || value == null || value == '')
return true;
return value.endsWith('@ gmail.com');
},
},
true
);
A.mix(
defaultFormValidator.STRINGS,
{
gmail: Liferay.Language.get('please-enter-a-valid-gmail-address')
},
true
);
});
Come prima cosa viene recuperata l'istanza di configurazione dell'oggetto globale FormValidator di AlloyUI; dopodichè, tramite la funzione mix andiamo ad iniettare nuove funzionalità all'interno del validatore.
La prima invocazione della funzione mix serve per aggiungere alle regole del validatore (campo RULES) una nuova funzione di validazione chiamata gmail (il nome sarà poi quello da usare nella taglib aui:validator).
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.
Il terzo parametro booleano true di ciascuna chiamata serve solamente a sovrascrivere eventuali definizioni omonime già presenti.
Ora deployate tutto quanto e buona validazione!