DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. JavaScript
  4. Sencha Touch : Login Form with Validation

Sencha Touch : Login Form with Validation

Tousif  Khan user avatar by
Tousif Khan
·
Feb. 05, 15 · Interview
Like (0)
Save
Tweet
Share
2.76K Views

Join the DZone community and get the full member experience.

Join For Free
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…

if form contains any error…

i hope you enjoy the post. happy coding :)

Sencha Touch Form (document)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • How to Secure Your CI/CD Pipeline
  • Top Three Docker Alternatives To Consider
  • Stream Processing vs. Batch Processing: What to Know
  • Top 5 Java REST API Frameworks

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: