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

Posted 2023-02-25

【中文标题】Sencha Touch 2：在表单字段下方显示错误消息

【英文标题】：Sencha Touch 2: Show error messages beneath form fields

【发布时间】：2015-06-16 11:54:23

【问题描述】：

我有一个 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
    );

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

【问题讨论】：

好问题！这也是我真正想要的，但我仍然没有找到通用的解决方案，我想要的另一件事是在标签上验证字段，而不是使用 Data.Model 进行最终验证。

【参考方案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);

您的消息将看起来像所附的屏幕截图

【讨论】：

不幸的是，这个答案没有回答关于如何在它对应的字段下方显示消息的问题，而不是作为弹出窗口

【参考方案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()); 
    );

【讨论】：

每条错误消息都应显示在相应的表单字段下方。所以我需要为每个字段添加项目。我想要一个通用的解决方案（或者至少是一个解决方案的路径），我只需调用类似form.isValid() 的东西，如果发生任何错误，A 会得到一个布尔值，如果需要，B 会在字段中添加错误消息。

是的，如果你想在相应的表单字段上显示错误消息，它是 inValid() 并获取项目并在按钮点击功能的条件下应用警报

【参考方案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