CODEWITHSUNDEEP
javascriptvalidationextjs4
shub
shub

Reputation: 1052

Mark form as invalid

On my field(s) in the FormPanel I added the listener blur. If this event occurs I execute the form validation as follows:

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

As the documentation of Ext JS explains, the markInvalid() function affects only the field itself. But I want also setting the form as invalid, so that the submit button is disabled when the form is invalid. Currently the function isValid() on the form always returns true, although the field(s) are marked as invalid.

My question now is, how can I achieve so that the form is also set as invalid with the code above?

Thank you very much for your help!

Upvotes: 1

Views: 3595

Answers (1)

Abdel Raoof Olakara
Abdel Raoof Olakara

Reputation: 19353

You should be able to make use of the hasInvalidField() method available with the form. For example:

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

From the docs:

Returns true if the form contains any invalid fields.

Upvotes: 1

Related Questions