Server side field validation can make the filling process of the form faster. It will show the incorrect form values on the fly. Remote validation must be done only in case when it is impossible to produce it on client side.

In this sample, I have implemented the validation directly in the form field to avoid the overloading the form controller (Low of Demeter).

I have extended the ‘Ext.form.field.Text’ but you can reimplement it in form for mixture or plugin. The sample just checks on the server if the entered word is anagram of the word “Anagram”. Validation is triggered on ‘change’ and ‘blur’ buffered (500ms) events (configurable).

Ext.define('app.ux.form.field.RemoteValidatedTextField', {
    extend: 'Ext.form.field.Text',

    validationUrl: false,
    validateOnChange: true,
    validateOnBlur: true,
    validationBufferInMs: 500,
    remoteValidationErrorText: true,

    initComponent: function () {
        this.registerValidationHandlers();
        this.callParent();
    },

    registerValidationHandlers: function () {
        if (this.validateOnChange) {
            this.registerOnChangeEvent();
        }
        if (this.validateOnBlur) {
            this.registerOnBlurEvent();
        }
        return this;
    },

    registerOnChangeEvent: function () {
        this.on(
            'change',
            this.validateTheField,
            this, {
                buffer: this.validationBufferInMs
            }
        );
        return this;
    },

    registerOnBlurEvent: function () {
        this.on(
            'blur',
            function (field) {
                this.validateTheField(field, field.getValue());
            },
            this, {
                buffer: this.validationBufferInMs
            }
        );
    },

    validateTheField: function (field, value) {
        Ext.Ajax.request({
            url: this.validationUrl,
            params: {
                validationValue: value
            },
            success: this.validationResponseSuccess,
            failure: this.validationResponseFailure,
            scope: this
        });
        return this;
    },

    validationResponseSuccess: function (response, opts) {
        var obj = Ext.decode(response.responseText);
        if (obj.isAnagram) {
            this.setRemoteValid(obj);
        } else {
            this.setRemoteInvalid(obj)
        };
    },

    validationResponseFailure: function (response, opts) {
        console.log('server-side failure with status code ' + response.status);
    },

    setRemoteValid: function (responseObj) {
        this.setValidation(true);
    },

    setRemoteInvalid: function (responseObj) {
        this.setValidation(responseObj.errorMessage);
    }
});