将表单标记为无效

Question

在 FormPanel 的字段中，我添加了监听器 blur。如果发生此事件，我将执行表单验证，如下所示：

listeners:{
    scope: this,
    blur: function(field, value){
        var username = field;
        if (username.getValue() == '') {
            username.markInvalid('This field is required');
        } else {
            Ext.Ajax.request({
                url: 'users/validateForm',
                method: 'POST',
                params: 'username=' + username.getValue(),
                success: function(response, opts) {
                    var jsonData = Ext.decode(response.responseText);
                    if (jsonData.msg.username != '') {
                        username.markInvalid(jsonData.msg.username);
                    }
                }
            });
        }
    }
}


buttons: [{
    text: 'Save',
    handler: function() {
        var form = this.up('form').getForm();
        if (form.isValid()) {
            alert('test');
        }
    },
    formBind:true
},{
    text: 'Cancel'
}]

正如 Ext JS 的文档所解释的， markInvalid() 函数仅影响字段本身。但我还想将表单设置为无效，以便在表单无效时禁用提交按钮。目前，尽管字段被标记为无效，但表单上的 isValid() 函数始终返回 true。

我现在的问题是，如何才能通过上面的代码将表单设置为无效？

非常感谢您的帮助！

Answer 1

您应该能够使用表单中提供的 hasInvalidField() 方法。例如：

var form = this.up('form').getForm();
if (form.hasInvalidField()) {
    alert('test');
}

来自文档：

如果表单包含任何无效字段，则返回 true。