Home > DeveloperSection > Articles > Form Validation using Model in Sencha Touch

Form Validation using Model in Sencha Touch


Sencha Touch Sencha Touch 
Ratings:
1 Comment(s)
 6603  View(s)
Rate this:

Form Validation using Model in Sencha Touch

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


Nice article

By Rose Mary on   3 years ago
Nice Article

Don't want to miss updates? Please click the below button!

Follow MindStick