I am using / and wish to validate an input using Ajax. For testing, I created the following script /.

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 () indicates that is not a good idea.

How is this acplished?

<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';
                }
            });
        }
    }
});

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/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./a/14220323/1032531) indicates that is not a good idea.

How is this acplished?

<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';
                }
            });
        }
    }
});

• javascript
• jquery
• ajax
• x-editable

Share Improve this question Follow edited May 23, 2017 at 12:14 CommunityBot 111 silver badge asked Apr 21, 2015 at 16:01 user1032531user1032531 26.4k7575 gold badges245245 silver badges416416 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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/x0bdavn7/