Sencha Touch 2：在表单字段下显示错误消息

Question

我有一个Sencha Touch 2 Form面板，如下所示：

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'
                    }
                ]
            }
        ]

    }
});

带模型

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.'
            }
        ]
    }
});

如果点击发送按钮，我现在使用该模型来验证表单：

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

我现在想要在相应的表单字段下显示我从验证中获得的消息。但谷歌和文档都无法帮助我。我是Sencha Touch的初学者，所以我们非常感谢您提供一个很好的解决方案。

Answer 1

要在相应的表单字段下显示验证所获得的消息，如果点按了发送按钮，则需要使用以下代码：

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

您的消息将显示为附加的屏幕截图

Answer 2

你必须在表格下面拿一个项目

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

并按下按钮

获取项目集文本

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

您可以使用文本字段的 setHtml 方法来动态显示和隐藏错误消息，但它只会呈现您需要处理 CSS 和多个错误消息案例所需的消息

Please refer documentation for more details here