Function returning true despite promise evaluating to false

Question

I'm having a real hard time figuring out the behaviour of Promises. I'm using Vue and the vee-validate library, which allows for manual validation of a form via:

this.$validator.validate()

However, when I try to use it I get weird behaviour:

async isFormValid() {
    return await this.$validator.validate();
},

Whenever I submit a form with errors, the form sends the AJAX request:

onApprove() {
    if (!that.isFormValid) {
        return false;
    }
    $.ajax({
        ...         
    });
    return false; // Modal never closes unless AJAX is successful.
},

Additionally, I've tried the following construct:

onApprove() {
    this.$validator.validate().then(result => {
        if(result) {
            $.ajax({
                ...        
            });
        }
        return false; // Modal never closes unless AJAX is successful.
     });
},

But this doesn't work either. I've found a work-around by doing this:

isFormValid() {
    this.$validator.validate();
    return Object.keys(this.fields).every(key => this.fields[key].valid);
},

But if someone could explain what I'm misunderstanding about the `Promise, that would be great.

Edit

Full onApprove example (always returns true regardless of validation:

onApprove() {
    that.$validator.validate().then(result => {
        if (result) {
            $.ajax({
                url: '/settings/user_management_add_user', method: 'POST', data: {
                    csrfmiddlewaretoken: that.csrfToken, password: that.password, user: JSON.stringify(that.users[that.activeUserRow]),
                }, success() {
                    $('#modify_user_modal').modal('hide');
                    that.showToast('check icon', gettext('User created'));
                    that.activeUserRow = undefined;
                    that.initialQuery();
                }, error(data) {
                    that.showToast('remove icon', gettext('User could not be created'));
                    if (data.responseText && data.responseText.length < 20) {
                        that.showToast('remove icon', data.responseText);
                    }
                },
            });
        }
        return false; // Modal never closes unless AJAX is successful.
    });
},

This method also doesn't work (return false first):

onApprove() {
    that.$validator.validate().then(result => {
        if (!result) {
            return false
        }
            $.ajax({
                url: '/settings/user_management_add_user', method: 'POST', data: {
                    csrfmiddlewaretoken: that.csrfToken, password: that.password, user: JSON.stringify(that.users[that.activeUserRow]),
                }, success() {
                    $('#modify_user_modal').modal('hide');
                    that.showToast('check icon', gettext('User created'));
                    that.activeUserRow = undefined;
                    that.initialQuery();
                }, error(data) {
                    that.showToast('remove icon', gettext('User could not be created'));
                    if (data.responseText && data.responseText.length < 20) {
                        that.showToast('remove icon', data.responseText);
                    }
                },
            });
        return false; // Modal never closes unless AJAX is successful.
    });
},

Your never waiting for the result of your ajax request so the return false is executed directly after the ajax call. — Axnyff, Jun 22 '18 at 16:00
If return false is executed then the modal shouldn't close (because OnApproval is false), so that doesn't explain why it always closes (aka returns true). — Darkstarone, Jun 22 '18 at 16:04
Your onApprove method is returning undefined in this snippet: you're not returning anything inside of your function — Axnyff, Jun 22 '18 at 16:09
How are you using your onApprove method to close your modal? — Axnyff, Jun 22 '18 at 16:11
It's a semantic-ui modal, so if the onApprove method returns true, it closes, if it returns false, it doesn't. — Darkstarone, Jun 22 '18 at 16:12
It looks like you have to do it manually if you want to close the modal: https://github.com/Semantic-Org/Semantic-UI/issues/935 It does not work with async validation — Axnyff, Jun 22 '18 at 16:14

score 0 · Answer 1 · answered Jun 22 '18 at 16:35

So @Axnyff found this semantic-ui beug report, which led me to the solution:

onApprove() {
    that.$validator.validate().then((result) => {
        if (result) {
            $.ajax({
                ...
                },
                complete() {
                    $('#modify_user_modal').modal('hide'); // Manually hide.
                },
            });
        }
    });
    return false; // Modal never closes.
},

Function returning true despite promise evaluating to false

1 Answers1