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.

Great question! This is also what I really want, but still I still haven't found a generic solution yet, Another thing I want is to validate the field on tabbing out, not the final validation with Data.Model. — diwatu, Aug 29 '15 at 20:02

score 1 · Answer 1 · answered Jul 16 '15 at 07:59

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 Error message

Unfortunately this answer does not answer the question on how to show the message beneath the field it corresponds to, not as an popup — Hikaru-Shindo, Jul 16 '15 at 11:39

RaviPatidar · Answer 2 · 2015-07-16T14:26:06.317

0

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()); 
    });
}

edited Jul 16 '15 at 14:26

answered Jul 16 '15 at 14:13

RaviPatidar

1,438
1
18
29

Each error message should be shown beneath the corresponding form field. So I would need to add items for each field. I would like a generalized soloution (or at least the path to one) where I just call something like `form.isValid()` and get A a boolean value if any errors occured and B add error messages to fields if needed. – Hikaru-Shindo Jul 16 '15 at 14:18
yes sure if you want to show error msg on corresponding form field which is inValid() and get items and apply alert in condition on button tap function – RaviPatidar Jul 16 '15 at 14:29

score 0 · Answer 3 · answered Jul 27 '21 at 10:36

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

Sencha Touch 2: Show error messages beneath form fields

3 Answers3