Clever Geek Handbook

Sencha Touch 2: Show error messages below form fields

I have a Sencha Touch 2 Form panel that 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 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.'
            }
        ]
    }
});

Now I am using a model to validate the form if the submit button is clicked:

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

Now I want to show the posts received from validation under the corresponding form field. But neither google nor the documentation could help me. I'm new to Sencha Touch, so a nice hint of a good solution would be appreciated.

+3


source to share


2 answers


To show messages received from validation below the corresponding form field, you need to use the following code if the submit button is clicked:

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 post will look like the attached screenshot Error message

+1


source


you need to take an element below a form like this

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


and get the text of the stencil when the button is pressed

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


source






More articles:


All Articles