xhadon
xhadon

Reputation: 876

ExtJS 6: Validator on a textfield not working properly

I got a signup-form with a textfield for the username. For this textfield I added a custom validator function to check the availability for the selected username:

                            xtype: 'textfield',
                            name: 'username',
                            msgTarget: 'under',
                            bind: {
                                fieldLabel: '{texts.username}'
                            },
                            allowBlank: false,
                            minLength: 3,
                            checkChangeBuffer: 300,
                            validator: function (value) {
                                if (value.length < 3) {
                                    return null;
                                }
                                Ext.Ajax.request({
                                    method: 'POST',
                                    url: '/rest/availability',
                                    params: {
                                        name: value
                                    }
                                }).then(
                                    function (result) {
                                        return Ext.JSON.decode(result.responseText) ? true : 'Username already exists';
                                    },
                                    function (response) {
                                        return 'Server issue.';
                                    }
                                )
                            }

This should probably do it. But it doesnt. I get a broken error, the validator shows always invalid and the message is not displayed:

textfield - user exists

When I check the response I get the correct value from the server. What am I missing here?

Thanks in advance.

Upvotes: 3

Views: 5560

Answers (1)

OliD
OliD

Reputation: 21

In order for the validation to pass you need to return true.

validator: function(value) {
   if(!valid) {
       return 'error message';
   }
   return true; // successfully passed
}

Upvotes: 2

Related Questions