In the article, I’m explaining the how to validate the form using model validation in sencha touch.
In Sencha Touch, validations are of six types:
1. Presence Validation
2. Length Validation
3. Email Validation
4. Format Validation
5. Inclusion Validation
6. Exclusion Validation
Presence Validation
It simple ensures that the field has a value or not. Zero counts as a valid value but empty strings do not. It ensures that the field is required and can’t be left empty.
Length Validation
It ensures that the field’s value is between minimum and maximum length.
Email Validation
It checks the format of the email field.
Format Validation
It ensures that the field’s value matches the regular expression format.
Inclusion Validation
It ensures that the field’s value is within a specific set of values.
Exclusion Validation
It ensures that the field’s value is not one of the specific set of values.
To use the form validation:
Step 1:
First create a basic form in sencha touch.
Ext.define('MyApp.view.FormPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.FormPanel',
config: {
items: [
{
xtype: 'fieldset',
title: 'Registration Form',
items: [
{
xtype: 'textfield',
label: 'Username',
labelWrap: true,
name: 'username',
placeHolder: 'Enter Username'
},
{
xtype: 'textfield',
label: 'Password',
labelWrap: true,
name: 'password',
placeHolder: 'Enter Password'
},
{
xtype: 'emailfield',
label: 'Email',
labelWrap: true,
name: 'email',
placeHolder: 'email@example.com'
},
{
xtype: 'urlfield',
label: 'Website',
labelWrap: true,
name: 'website',
placeHolder: 'http://example.com'
},
{
xtype: 'textareafield',
label: 'About You',
labelWrap: true,
name: 'aboutyou',
placeHolder: 'Write About Yourself'
}
]
},
{
xtype: 'button',
itemId: 'save',
width: '40%',
text: 'Save'
}
],
listeners: [
{
fn: 'onSaveTap',
event: 'tap',
delegate: '#save'
}
]
},
onSaveTap: function(button, e, eOpts) {
}
});This form contains the following fields:
username, password, email, website and aboutyou with tap listeners attached to the save button.
<URL OF BASIC FORM>
Step 2:
Now create a model with fields that matches with Form fields. You can add the fields to the model through field configuration.
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
alias: 'model.User',
config: {
fields: [
{
name: 'username'
},
{
name: 'password'
},
{
name: 'email'
},
{
name: 'website'
},
{
name: 'aboutyou'
}
]
}
});The name of model is “User” and it has the same fields that match with the form fields.
Step 3:
Now add the validation to the model
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
alias: 'model.User',
config: {
fields: [
{
name: 'username'
},
{
name: 'password'
},
{
name: 'email'
},
{
name: 'website'
},
{
name: 'aboutyou'
}
],
validations: [
{
type: 'presence', // Username is required
field: 'username'
},
{
type: 'presence', // Password is required
field: 'password'
},
{
type: 'presence', // Email is required
field: 'email'
},
{
type: 'presence', // Website is required
field: 'website'
},
{
type: 'presence', // About you is required
field: 'aboutyou'
},
{
type: 'format', // Regular Expression format for username
message: 'Username must be alphanumeric',
matcher: /[0-9A-Za-z]{6,15}/,
field: 'username'
},
{
type: 'length', // Checks length of Password
message: 'Password must contain min 6 characters',
field: 'password',
min: 6
},
{
type: 'email', // Checks format of Email
message: 'Email format is invalid',
field: 'email'
}
]
}
});Drag-n-drop the validation controls from the toolbox and adds to the model and give particular field name to whom you want to validate.
Step 4:
Now write the below code in the tap event of save button.
onSaveTap: function(button, e, eOpts)
{
var formObj = button.up('FormPanel'); //Gives reference of Form Panel
var formData = formObj.getValues(); //Gives the form values
var usr = Ext.create('MyApp.model.User', // Create an instance of Model
{
username: formData.username,
password: formData.password,
email:formData.email,
website:formData.website,
aboutyou: formData.aboutyou
});
var errs = usr.validate(); // Call the validations
var msg = '';
if (!errs.isValid()) // Checks whether the error is valid
{
errs.each(function (err) {
msg += err.getField() + ' : ' + err.getMessage() + '<br/>';
});
Ext.Msg.alert('ERROR', msg);
}
else
{
Ext.Msg.alert('SUCCESS', 'Looks like the Form is valid');
}
}
Get the form values using getValues() inside onSaveTap() Method, that will be trigged when “save” button is clicked. The getValues() method returns an object containing the value of each field in the form.
Create an instance of already defined User model Class using Ext.create() and set the model fields with the form values and apply validation using validate() method. The validate() method returns error objects. Using isValid() method, we can check whether is there any errors, if error exists, we display error message else we are display success message.
Output
Anonymous User
26-Sep-2019Very Knowledgeful article....Thank You
Rose Mary
26-Nov-2013