【问题标题】:ExtJS 4 - How to mark form field invalid and display red borders around it (as done default by ExtJS) if custom validation fails?ExtJS 4 - 如果自定义验证失败,如何标记表单字段无效并在其周围显示红色边框(ExtJS 默认完成)?
【发布时间】:2011-12-05 02:25:17
【问题描述】:

我有一个表单,其中一些字段需要在服务器端进行验证。

提交表单时,服务器会验证这些字段的值,如果验证失败,则服务器返回 success:false(以及验证失败的每个字段的名称和错误消息)。

现在,我需要显示“无效”等字段并在它们周围应用相同的红色边框,如果客户端验证失败,这是 ExtJS 默认完成的。

我尝试使用以下方法:

Ext.getCmp('fieldId').markInvalid() 和 invalidCls:'x-form-invalid-field'

我在form.submit的'failure'回调函数中使用了上述语句。这些语句会被调用,但不会对这些字段产生任何影响。

因此任何人都可以在以下方面提供指导:

当自定义验证失败时,如何将字段标记为无效并在其周围应用相同的效果(带有红色边框)?

提前致谢。

【问题讨论】:

    标签: javascript forms validation extjs extjs4


    【解决方案1】:

    从服务器获取错误信息

    Ext.getCmp('your_form_id').getForm().findField('field_id_or_field_name').markInvalid('server_error_message');
    

    【讨论】:

    • 这不会使绑定到表单的提交按钮失效。
    • 太棒了!!你让我今天一整天都感觉很好。我在找这个。标记无效()
    【解决方案2】:

    我已经找到了解决方案。

    如果服务器端验证失败,需要从服务器返回以下内容:

    success:false,
    errors:{
        field1:errorMsg1,
        field2:errorMsg2
    }
    

    这本身会将字段标记为无效,并在出现相关错误时将红色边框应用于字段。

    希望这对寻找类似内容的人有所帮助。

    【讨论】:

    • 我正在尝试做同样的事情,但我不知道如何将其返回给 extjs..请你举个例子。谢谢
    • 当然可以,但是如果您可以创建一个新问题并在此处更详细地发布您的问题以便得到解答,那就太好了。
    • 我已经做了并且得到了一个我无法工作的答案,我需要一个更简单的答案,因为我对这一切仍然很陌生,ty。这是stackoverflow.com/questions/7915948/…
    • 我已尝试在上面发布的链接中回答您的问题。希望对您有所帮助。
    • 只要你提交表单就可以使用,例如:form.submit()。如果您使用 Ext.ajax,则 errorReader 不会处理验证。
    【解决方案3】:

    如果您也想更改错误消息,请使用 setActiveError 代替 markInvalid 函数。

    Ext.getCmp('your_component_id').setActiveError('your_custom_error_message')
    

    【讨论】:

      【解决方案4】:

      试试这个,是关于服务器验证的,你可以使用json或者xml http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/form/xml-form.html

      【讨论】:

        【解决方案5】:

        Ext.getCmp('#fieldId').isValid();

        【讨论】:

        • 请尽量避免只是将代码作为答案转储,并尝试解释它的作用和原因。对于没有相关编码经验的人来说,您的代码可能并不明显。
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2011-02-19
        • 1970-01-01
        • 1970-01-01
        • 2017-08-04
        • 2011-12-18
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多