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.

Form Validation using Model in Sencha Touch

<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

Form Validation using Model in Sencha Touch

  Modified On Nov-22-2017 10:28:36 AM

Leave Comment