I'm using jQuery-steps in a legacy codebase.

The point is, I'm trying to make it dynamic and I'm stuck at asynchronistic nature of form validation.

This plugin creates a multi-step form, and you can click next to navigate to the next tab.

However, there is this onStepChanging: function (event, currentIndex, priorIndex) function that can be used to prevent navigation to the next tab, if form is invalid.

It works great for synchronous fields. That is, this code works great:

onStepChanging: function (event, currentIndex, newIndex) {
    if ($('#username').val() === '') {
        return false;
    }
    return true;
}

But this code does not work:

onStepChanging: function (event, currentIndex, newIndex) {
    fetch('/validate?username='  + $('#username').val())
    .then(function(result) {
        if (result == 'valid') {
            return true;
        }
        return false;
    });
}

This second code does not work, because it does not wait for the result of the fetch method.

How can I force it to wait for the result of fetch, and then return?