JavaScript  »  Articoli  »  Ext.js 

Nella prima parte di questo articolo abbiamo visto come dichiarare dei pannelli Ext di tipo FormPanel, come creare dei moduli con differenti layout e una carrellata rapida dei campi che si possono inserire all'interno dei nostri form. In questa parte cercheremo di fare un passo avanti continuando un'analisi degli esempi proposti sul sito di Ext su questa pagina e affrontando dettagliatamente le problematiche di interazione di un elemento.

Validazioni dei campi

Innanzitutto possiamo fare qualche considerazione sulla validazione. Tutti i campi che si possono inserire in un form hanno un attributo validator che serve a definire la funzione di validazione che si vuole utilizzare al momento del submit (ovvero quando il form riceve un evento che lo porta a inviare i dati all'indirizzo esplicitato nell'attributo url). Ad esempio:

namePrimary = new Ext.form.TextField({
fieldLabel: 'Name/Group',
name: 'namePrimary',
allowBlank: true,
msgTarget: 'under',
validator:function(value){
return yourConditionTesting(value) || 'valore non valido' ; 
}
})

In particolare notiamo come nell'attributo validator abbiamo definito una chiamata a una funzione a partire dal valore che sta assumendo il nostro campo di testo al momento della validazione messa in OR ( || ) con un messaggio di errore ('valore non valido'). In questo modo il validator assume valore uguale al booleano true o al messaggio da riportare sul form per segnalare l'invalidità del campo.

Un altro modo per testare la validità di un form è dato dall'istruzione form.isValid(). Per utilizzarlo nei nostri applicativi potremmo scrivere una funzione Javascript con il codice che segue:

var msg, valid = true;
form.items.each(function(field){
msg = field.isValid(true);
if(msg !== true ){ //true to suppress invalidMarking
alert(field.fieldLabel + ' is invalid:' + msg );
valid = false;
}
});
return valid;

Esistono molti attributi che possiamo associare a un elemento Ext per poter gestire al meglio la validazione. Alcuni campi speciali, come il campo DateField, o il TimeField, o il NumberField e così via, hanno delle validazioni implicite dettate dal tipo di campo e dai valori che può accettare. Queste funzionalità faranno sicuramente comodo a chi programma da diversi anni nel campo web: è infatti molto piacevole potersi sbarazzare di centinaia di righe di funzioni che determinano se un numero è valido o se una data è scritta correttamente o meno.

Vediamo ora, un rapido elenco di attributi, oltre a validator, che possiamo associare pressappoco a tutti i campi di un form.

• allowBlank: se settato su false trasforma il campo in obbligatorio (il default è true);
• blankText: è il messaggio di testo da visualizzare se la validazione allowBlank fallisce (il messaggio di default è "Questo campo è obbligatorio");
• invalidClass: la classe CSS da utilizzare quando si setta un campo non valido (di default è "x-form-invalid") ;
• invalidText: è il messaggio di testo da visualizzare per settare l'errore nel caso in cui un campo risulti non valido (il default è "Il valore in questo campo non è valido");
• maxLengthText: è il messaggio di testo da visualizzare se la lunghezza massima viene superata (il default è "La lunghezza massima di questo campo è x");
• minLengthText: è il messaggio di testo da visualizzare se la lunghezza minima di convalida non riesce (il default è "La lunghezza minima di questo campo è x");
• regex: un oggetto JavaScript RegExp con cui validare il contenuto di un campo (il default è nullo). Se disponibile, questa regex sarà valutata solo dopo la che tutti i metodi validatori ritornano vero. Se il test fallisce, il campo sarà segnato utilizzando regexText;
• regexText: è il messaggio di testo da visualizzare se fallisce il controllo regex (il default è "");
• validateOnBlur: questo è un attributo molto utile e permette di effettuare delle validazioni quando il campo perde il focus. Associando una funzione Ajax a questo campo potremmo ad esempio lanciare un controllo lato server che verifica la presenza di un campo in un database o cose simili (il default è true);
• validationDelay: il tempo in millisecondi che fa partire la validazione dopo l'input (il default è 250);
• validationEvent: l'evento che dovrebbe avviare la validazione. Da impostare a false per disattivare la validazione automatica (il default è "keyup").

Per terminare questo capitolo sulle validazioni semplici, riportiamo ancora due proprietà: format e nanText. La prima è associata in particolare ai campi DateField e TimeField. In particolare seguono la formattazione che trovate a questo link. Grazie a questa stringa si possono pilotare le validazioni sul contenuto dei campi data ed ora. La proprietà nanText, invece, riguarda i campi numerici ed è il testo del messaggio da visulizzare nel caso in cui il campo non risulti un numero valido.

Altri articoli

Altre guide

Altre newsletter