validateBeforeSubmitting doesn't allow triggering async validator

[bepenelle]

I set validateBeforeSubmitting to true. Thanks to that settings, the synchronous validators do trigger when the field value changes. However, my async validator is not triggered when the field value changed.

Here is my code :

$(function(){
    const validation = new JustValidate('#signupForm', {
        validateBeforeSubmitting: true,
    });

    validation
        .addField('#pseudo', [
            {
                rule: 'required',
                errorMessage: 'Field is required'
            },
            {
                rule: 'minLength',
                value : 3,
                errorMessage: 'Minimum 3 characters'
            },
            {
                rule: 'maxLength',
                value : 16,
                errorMessage: 'Maximum 16 characters'
            },
            {
                validator: function(value) {
                    return function() {
                        return $.getJSON("member/pseudo_available_service/" + value);
                    }
                },
                errorMessage: 'Name already exists',
            },
        ], { successMessage : 'Looks good !'})
        ...

How can I solve this ?

[horprogs]

Async validators not triggered after inputs changing (this applies to validateBeforeSubmitting as well). The reason is you usually don't want to call API endpoints for every change, it creates unnecessary load for the backend.

Currently async validators triggered only when you submit the form.

[horprogs]

I can suggest a workaround to use onValidate callback (it triggered every time when input changes), call your endpoint there and use showErrors method

[bepenelle]

Is there a workaround? This is some kind of feature request in my case. It should be nice to have a flag in the settings for that and let the developer decide if the extra load is acceptable or not.

[horprogs]

yeah makes sense to add this flag. I described a workaround above

[bepenelle]

thanks, I will try the workaround

[bepenelle]

looking forward for the flag in the settings ;-)

[bepenelle]

The workaround you proposed works great! Thx

.onValidate(async function(event) {
    const res = await $.getJSON("member/pseudo_available_service/" + $("#pseudo").val());
    if (!res)
        this.showErrors({ '#pseudo': 'The pseudo is already used' })
})

However, if you manage to add a flag in the settings to handle that use case in a more "standard" way, I'm most certainly interested.

[galabl]

Any update, eta on this issue?