Sencha touche form validation - sencha-touch-2

Question

I am creating my first app with sencha touch.
I have a problem with form validation.
This is the form:
var form = new Ext.form.FormPanel({
title: 'Activity',
items: [{
xtype: 'fieldset',
items: [{
xtype: 'textfield',
name : 'sector',
label: 'Sector',
required: true
},
{
xtype: 'selectfield',
name : 'city',
label: 'City',
options: [
{
text: '*',
value: '*'
},
{
text: 'First Option',
value: 'first'
},
{
text: 'Second Option',
value: 'second'
},
{
text: 'Third Option',
value: 'third'
}]
},
{
xtype: 'textfield',
name : 'nation',
label: 'Nation',
required: true
},
{
xtype: 'toolbar',
docked: 'bottom',
layout: {
pack: 'center'
},
items: [{
xtype: 'button',
text: 'Cerca',
handler: function() {
formSettori.submit({
url: 'book.php',
method: 'GET',
success: function() {
Ext.Msg.alert('OK');
},
failure: function() {
Ext.Msg.alert('NO');
}
});
}
},
{
xtype: 'button',
text: 'Reset',
handler: function() {
form.reset();
}
}]
}]
}]
});
the form has only three fields:
-activities
-city​​
-nation
all fields are required.
activities and the nation must not be empty, while the city should not be equal to *
how do I control the fields?
thank you!

Answer 1

There is not built in way to do form validation. You must do it yourself.
The easiest way is to use the private Ext.form.Panel method getFields to loop through each of the fields and ensure they are not empty.
var fields = form.getFields(),
field, name, isEmpty;
for (name in fields) {
field = fields[name];
isEmpty = (!field.getValue() || field.getValue() == "");
if (isEmpty) {
field.addCls('x-invalid');
} else {
field.removeCls('x-invalid');
}
}
If the field is empty, then we add the x-invalid class (so you can style it).