Sencha Touch : Login Form with Validation

DZone's Guide to

Sencha Touch : Login Form with Validation

Tousif Khan

Feb. 05, 15 · ·

Free Resource

Like (0)

Comment (0)

Save

{{ articles[0].views | formatCount}} Views

In today’s post I am going to show you how to create a simple form in Sencha Touch with validation. I will create a simple Login form with username and password field and create a model which contains fields and validation logic.

Once user submit form for login, we get the validation logic and see if all the field get passed against our model validation logic, if no then will show error message alert and make the field highlighted in red border. So lets start first by creating Model. Pay attention to validations array, its an array of all validation rules that we want to apply for our model fields.

Ext.define("TechZoo.model.User", {
	extend: "Ext.data.Model",
  config: {
    fields  : [
      {name : 'username', type: 'string'},
      {name : 'password', type: 'string'}
    ],
    validations : [{
      type: 'presence',
      field: 'username', 
      message: 'can not be blank.'
    },{
      type  : 'presence',
      field : 'password',
      message: 'can not be blank.'
    },{
      type  : 'length',
      field : 'username',
      min   : 6,
      max   : 8,
      message: 'is not in valid range.'
    },{
      type  : 'length',
      field : 'password',
      min   : 6,
      max   : 8,
      message: 'is not in valid range.'
    }]
  }
});

Now, create a LoginForm by extending FormPanel.

Ext.define('TechZoo.view.LoginForm', {
	extend	: 'Ext.form.Panel',
  alias 	: 'widget.loginform',
  config	: {
    fullScreen  : true,
    scroll      : 'vertical',
    url         : '',
    items :[{
      xtype : 'fieldset',
      title : 'Enter Your Login Details',
      items : [{
        xtype : 'textfield',
        labelWidth: 120,
        label : 'Username',
        name  : 'username',
        required: true
      },{
        xtype : 'passwordfield',
        label : 'Password',
        labelWidth: 120,
        name  : 'password',
        required: true
      }]
    },{
      xtype   : 'toolbar',
      docked  : 'bottom',
      layout  : {
        pack  : 'center',
        type  : 'hbox'
      },
      items   : [{
        text  : 'Reset',
        handler: function(me) {
          var form = me.up('formpanel');
          form.reset();
          Ext.each(form.query('textfield'), function(tf){
            tf.removeCls('invalidField');
          });
        }
      },{
        text  : 'Login Now',
        ui    : 'confirm',
        handler: function(me) {
          var form = me.up('formpanel');
          var user = Ext.create('TechZoo.model.User', form.getValues());
          var errors = user.validate();
          if(!errors.isValid()) {
            var errorMsg = "";
            errors.each(function (item, index, length) {
              form.down("field[name='"+item.getField()+"']").addCls('invalidField');
              errorMsg += ' ' +item.getField()+' '+ item.getMessage() + '<br/>';
            });
            Ext.Msg.alert("Validation Failed", errorMsg);
          }
          else {
            Ext.Msg.alert("Validation Success", "Form doesn't contain any error."); 
          }
        }
      }]
   }]
  }
});

Take a close look at login button handler. First, we are creating the model object and then calling validate() method on it. Calling validate methods return Ext.data.Errors object. We can call isValid() function to see if form contain any error on not.

Output:

On Initial launch of form…