How to add Phone Number Validation in Sencha Touch 2

In Sencha Touch 2, Models have strong support for validating its data. In Modal, Validation Configuration follows the same format as the Field Configuration. It expects the field name and type of validation. Following are the validation types available (as per Sencha documentation)

1) presence -  Ensures that the field has a value. Zero counts as a valid value but empty strings do not.

2) length  - Ensures that a string is between a minimum and maximum length. Both constraints are optional.

3) format - Ensures that a string matches a regular expression format. In the example above we ensure that the age field is four numbers followed by at least one letter.

4) inclusion - Ensures that a value is within a specific set of values (for example, ensuring gender is either male or female).

5) exclusion - Ensures that a value is not one of the specific set of values (for example, blacklisting usernames like 'admin').

6) email - Ensures that the filed value matches with the format of an email address.

Today, we are going to see how we can add Phone Numer model validation in Sencha Touch. For this, we are going to use 'format' validation type.

First, we are going to create a Model Class with name 'User' and two fields Name, Email added under fields configuration.

Ext.define('App.model.User', {
     extend: 'Ext.data.Model',
     alias: 'model.User',

    config: {
         fields: [
           {
                name: 'Name'
           },
           {
                name: 'PhoneNumber'
            }
        ],
        validations: [
            {
                type: 'presence',
                field: 'Name'
            },
            {
                type: 'presence',
                field: 'PhoneNumber'
            },
            {
               type: 'format',
               field: 'PhoneNumber',
               matcher: /^([0-9]{3}[-]?){1,2}([0-9]{4})$/, //US Phone No
               message: 'Your Phone Number is invalid'
            }
       ]
   }
});

Now, we are going to apply validations for the fields added under fields configuration. Following are the those

• Using presence validation type, both Name and PhoneNumber Fields are required and can't be empty
• Using format validation type. Phone Number Field matches with the regular expression format and error message that needs to be shown if validation fails.

Now,  Lets create an instance of already defined User model Class using Ext.create() by setting fields with values and apply validation using validate(). This method returns error objects. Using isValid() method, we can check whether is there any errors. if error exists, we are forming error message using Ext.each() else we are display success message.

Example 1:

var usr = Ext.create('App.model.User',{
     Name: 'Ravi',
     PhoneNumber: '12-456-7890'
});

var errs = usr.validate();
var msg = '';

if (!errs.isValid()) {

   errs.each(function (err) {
   msg += err.getField() + ' : ' + err.getMessage() + '';
   });

   Ext.Msg.alert('ERROR', msg);

} else {
    Ext.Msg.alert('SUCCESS', 'Looks like the model is valid');
}

Output: 

Example 2:

var usr = Ext.create('App.model.User',{
     Name: 'A Suresh',
     PhoneNumber: '123-456-7890'

});

var errs = usr.validate();
var msg = '';

if (!errs.isValid()) {

    errs.each(function (err) {
    msg += err.getField() + ' : ' + err.getMessage() + '';
    });

    Ext.Msg.alert('ERROR', msg);

} else {
   Ext.Msg.alert('SUCCESS', 'Looks like the model is valid');
}

Output:

Hope, you enjoyed this Post.