Sencha Touch 2: Show error messages beneath form fields

Question

I've got a Sencha Touch 2 Form panel which looks like this:

Ext.define("App.view.contact.Contact", {
    extend: 'Ext.form.Panel',
    xtype: 'contactForm',
    id: 'contactForm',

    requires: [
        'Ext.form.Panel',
        'Ext.form.FieldSet',
        'Ext.field.Select',
        'Ext.field.Email'
    ],

    config: {
        title: 'Contact form',
        layout: 'fit',
        scrollable: null, // needed to show correctly in panel
        iconCls: 'favorites',

        items: [
            {
                xtype: 'fieldset',
                defaults: {
                    labelWidth: '35%'
                },
                title: 'Personal Data',

                valueField: 'value',
                displayField: 'text',
                items: [
                    {
                        xtype: 'textfield',
                        label: 'Firstname*',
                        name: 'firstname'
                    }, {
                        xtype: 'textfield',
                        label: 'Lastname*',
                        name: 'lastname'
                    }, {
                        xtype: 'emailfield',
                        label: 'E-Mail*',
                        name: 'email'
                    }
                ]
            }, {
                xtype: 'fieldset',
                defaults: {
                    labelWidth: '35%'
                },
                title: 'Your Request',
                items: [
                    {
                        xtype: 'textareafield',
                        label: 'Request*',
                        name: 'requestText'
                    }
                ]
            },
            {
                xtype: 'fieldset',
                items: [
                    {
                        xtype: 'button',
                        text: 'send',
                        id: 'contactButton',
                        action: 'contact',
                        ui: 'action'
                    }
                ]
            }
        ]

    }
});

with a model

Ext.define('App.model.Contact', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            'firstname',
            'lastname',
            'email',
            'requestText'
        ],
        validations: [
            {
                type: 'presence',
                field: 'firstname',
                message: 'Please provide your firstname.'
            }, {
                type: 'presence',
                field: 'lastname',
                message: 'Please provide your lastname.'
            }, {
                type: 'presence',
                field: 'email',
                message: 'Please provide your firstname e-mail address.'
            }, {
                type: 'presence',
                field: 'requestText',
                message: 'Please provide your request.'
            }
        ]
    }
});

I now use the model to validate the form if the send button is tapped:

var formValues = form.getValues(),
    fields = form.query("field");

// remove the style class from all fields
for (var i = 0; i < fields.length; i++) {
    fields[i].removeCls('invalidField');
    // TODO: Remove old error messages from fields
}

// dump form fields into new model instance
var model = Ext.create('App.model.Contact', formValues);

// validate form fields
var errors = model.validate();

if (!errors.isValid()) {
    // loop through validation errors and generate a message to the user
    errors.each(function (errorObj) {
        var s = Ext.String.format('field[name={0}]', errorObj.getField());
        form.down(s).addCls('invalidField');
        // Set value of errorObj.getMessage() as error message to field
    });
}

I now want to show the messages I got from validation beneath the corresponding form field. But neither google nor the documentation could help me there. I'm a beginner with Sencha Touch, so a nice hint for a good solution would be appreciated.

Answer 1

To show the messages you got from validation beneath the corresponding form field, you need to use the following code if the send button is tapped:

var formValues = form.getValues(),
    fields = form.query("field");

// remove the style class from all fields
for (var i = 0; i < fields.length; i++) {
    fields[i].removeCls('invalidField');
    // TODO: Remove old error messages from fields
}

// dump form fields into new model instance
var model = Ext.create('App.model.Contact', formValues);

// validate form fields
var errors = model.validate();

if (!errors.isValid()) {
    var msgStr = "";
    // loop through validation errors and generate a message to the user
    errors.each(function (errorObj) {
        var s = Ext.String.format('field[name={0}]', errorObj.getField());
        form.down(s).addCls('invalidField');
        msgStr += errorObj.getMessage() + "<br/>";
        // Set value of errorObj.getMessage() as error message to field
    });
    Ext.Msg.alert("Error!", msgStr);
}

And your message will look like the attached screen shot

Answer 2

you have to take an item below form like that

items: [{
        xtype: 'textareafield',
        itemId: 'errorMessage'
        }]

and get item set text on button tap

if (!errors.isValid()) {
    // loop through validation errors and generate a message to the user
        errors.each(function (errorObj) {
        var s = Ext.String.format('field[name={0}]', errorObj.getField());
        form.down(s).addCls('invalidField');
        // Set value of errorObj.getMessage() as error message to field
        Ext.getCmp('errorMessage').setText(errorObj.getMessage()); 
    });
}

Answer 3

var formValues = form.getValues(),
fields = form.query("field");

// remove the style class from all fields
for (var i = 0; i < fields.length; i++) {
    fields[i].removeCls('invalidField');
    // TODO: Remove old error messages from fields
}

// dump form fields into new model instance
var model = Ext.create('App.model.Contact', formValues);

// validate form fields
var errors = model.validate();

if (!errors.isValid()) {
    // loop through validation errors and generate a message to the user
    errors.each(function (errorObj) {
        var s = Ext.String.format('field[name={0}]', errorObj.getField());
        form.down(s).addCls('invalidField');
        form.down(s).setHtml(errorObj.getMessage());
        // Set value of errorObj.getMessage() as error message to field
    });
}

You can use the setHtml method of the text field to show and hide the error message dynamically but it will just render the message you will need to handle the CSS and multiple error message cases from there

Please refer documentation for more details here