Question

I’m new to Sencha Touch and trying to validate login form. I’ve got simple model of User with two fields: email, password. I have created some validations rules with messages:

Ext.define('FirstApp.model.User', {
    extend : 'Ext.data.Model',
    config : {
        fields : [{
            name : 'email',
            type : 'string'
        }, {
            name : 'password',
            type : 'password'
        }],

        validations : [{
            type : 'presence',
            name : 'email',
            message : "Enter email"
        }, {
            type : 'presence',
            name : 'password',
            message : "Enter Password"
        }, {
            type : 'format',
            name : 'email',
            matcher : /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/,
            message : "Wrong Email Format"
        }]
    }
}); 

In LoginForm view I’d like to validate login form, but when wrong parameters have been entered, alert popup shows undefined instead of messages. After entering correct data form is sent. Here you can see the LoginForm code:

Ext.define('FirstApp.view.login.LoginForm', {
    extend : 'Ext.form.FormPanel',
    xtype : 'loginpanel',
    requires : ['Ext.form.FieldSet', 'FirstApp.model.User', 'Ext.field.Email', 'Ext.field.Password'],

    config : {
        title : 'LOGIN',
        scrollable : 'vertical',
        items : [{
            xtype : 'fieldset',
            title : 'Login',
            defaults : {
                required : true,
            },
            items : [{
                xtype : 'emailfield',
                name : 'email',
                placeHolder : 'Email'
            }, {
                xtype : 'passwordfield',
                name : 'password',
                placeHolder : 'Password'
            }]
        }, {
            xtype : 'button',
            text : 'Log in',
            ui : 'confirm',
            handler : function() {
                var model = Ext.ModelMgr.create(this.up('formpanel').getValues(), 'FirstApp.model.User');

                var errors = model.validate(); console.log(errors);
                var message = '';

                if (errors.isValid()){
                    // Validation successful - show loader
                    Ext.Viewport.setMasked({
                        xtype:'loadmask',
                        message:'Logging in...'
                    });
                    // Login
                    this.up('formpanel').submit({
                        url: 'http://localhost/firstappweb/www/en/?do=login',
                        method: 'POST',
                        success: function(form, result) {
                            console.log(result);
                            Ext.Viewport.setMasked(false);
                        },
                        failure: function(form, result) {
                            console.log(result);
                            Ext.Viewport.setMasked(false);
                        }                       
                    });

                } else {
                    // Validation failed
                    console.log(errors.items);
                    Ext.each(errors.items, function(rec, i) {
                        message += rec.message+"<br />";
                    });
                    Ext.Msg.alert("Validate", message, function(){});
                    return false;
                }
            }
        }, {
            // Do not log in
            xtype : 'toolbar',
            docked : 'bottom',
            layout : {
                pack : 'center'
            },
            items : [{
                xtype : 'button',
                text : 'Do not log in',
                handler : function() {
                    Ext.Msg.alert("You do not want to log in?", 'Shame on you!', function() {
                    });
                    // this.push();
                }
            }]
        }]
    }
}); 

Thanks for help in advance.

Answer 1

I am assuming since you have done console.log of errors.items you must have seen rec.message value using debugger to understand why is it undefined.

Anyways this is how I would do:

var data="";
errors.each(function (item, index, length) {
  // Each item in the errors collection is an instance of the Ext.data.Error class.
  data = data + '|'+item.getField()+' - '+ item.getMessage() +'|';
});
Ext.Msg.alert("Validation Failed", data);