Validate x-editable using Ajax

Question

I am using http://vitalets.github.io/x-editable/ and wish to validate an input using Ajax. For testing, I created the following script https://jsfiddle.net/m698gxgj/1/.

My Ajax request is asynchronous so the validate callback returns I believe undefined, and therefore it doesn't result in the input failing validation.

I "could" change my Ajax request to be synchronous, but everything I read (https://stackoverflow.com/a/14220323/1032531) indicates that is not a good idea.

How is this accomplished?

<p>Name</p><a href="javascript:void(0)" id="name"></a>

$('#name').editable({
    type: 'text',
    title: 'Name',
    url: '/echo/json/',
    pk: 123,
    validate: function (value) {
        if (value == 'bob') {
            return 'bob is not allowed';
        } else {
            $.post('/echo/html/', {
                html: 'false',
                delay: .5
            }, function (result) {
                if (result == 'false') {
                    console.log('remote error');
                    return 'remote error';
                }
            });
        }
    }
});

Answer 1

The validate option is only to be used for client side validation, so the if (value == 'bob') bit is alright, but you shouldn't fire the ajax post in the else block.

You should make the url option do the ajax post, then you can leverage the success and error options to handle async callback properly.

For example:

$('#name').editable({
    type: 'text',
    title: 'Name',
    url: function () {
        return $.post('/echo/json/', {
            json: 'false',
            delay: .5
        });
    },
    pk: 123,
    validate: function (value) {
        if (value == 'bob') {
            return 'bob is not allowed';
        }
    },
    success: function (response) {
        if(response === false) {
            console.log('remote error from success');
            return 'remote error';
        }
    },
    error: function (response) {
        console.log('remote error from fail');
        return 'remote error';
    }
});

jsfiddle: https://jsfiddle.net/x0bdavn7/