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

我有一个Sencha Touch 2表单面板，看起来像这样：

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

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

var formValues=form.getValues（），
字段=form.query（“字段”）；
//从所有字段中删除样式类
对于（变量i=0；i

---

现在，我想在相应的表单字段下显示我从验证中获得的消息。但是谷歌和文档都不能帮助我。我是Sencha Touch的初学者，因此如果您能提供一个好的解决方案，我将不胜感激。

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

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

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

var formValues=form.getValues（），
字段=form.query（“字段”）；
//从所有字段中删除样式类
对于（变量i=0；i”；
//将errorObj.getMessage（）的值设置为字段的错误消息
});
Ext.Msg.alert（“错误！”，msgStr）；
}

您的邮件看起来就像附加的屏幕截图

---

你必须像这样在表格下面填写一个项目

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

---

不幸的是，这个答案没有回答如何在它对应的字段下显示消息的问题，而不是作为弹出窗口。每个错误消息都应该显示在相应的表单字段下。因此，我需要为每个字段添加项目。我想要一个通用的解决方案（或者至少是一个解决方案的路径），在这里我只需调用类似于

form.isValid（）

的东西，如果发生任何错误，就得到一个布尔值，如果需要，就向字段添加错误消息。如果要在相应的表单字段上显示错误消息，则确定该字段无效（）获取物品并在按钮点击功能的条件下应用警报伟大的问题！这也是我真正想要的，但我仍然没有找到一个通用的解决方案，我想做的另一件事是在选项卡上验证字段，而不是使用Data.Model进行最终验证。