Tuesday, 23 April 2013

How to add Date Model 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 date 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, DateOfBirth added under fields configuration.
Ext.define('App.model.User', {

     extend: 'Ext.data.Model',
     alias: 'model.User',

    config: {
         fields: [
             {
                name: 'Name'
           },
           {
                name: 'DateOfBirth'
            }
        ],
        validations: [
            {
                type: 'presence',
                field: 'Name'
            },
            {
                type: 'presence',
                field: 'DateOfBirth'
            },
            {
               type: 'format',
               field: 'DateOfBirth',
               matcher: /[0-9]{4}-[0-9]{2}-[0-9]{2}/,     //YYYY-MM-DD
               message: 'Invalid Date Format, it should be in (YYYY-MM-DD)'
            }
       ]
   }
});

Now, we are going to apply validations for the fields added under fields configuration. Following are the those
  • Using presence validation, both Name and DateOfBirth Fields are required and can't be empty
  • Using format validation. DateOfBirth Field matches with regular expression format (YYYY-MM-DD) 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',
     DateOfBirth: '1983-8-9'
});

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',
     DateOfBirth: '1983-08-29
});

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.

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...