validateBeforeSubmitting doesn't allow triggering async validator

[Benoît Penelle]

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 ?

[Georgii Perepecho]

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.

[Georgii Perepecho]

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

[Benoît Penelle]

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.

[Georgii Perepecho]

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

[Benoît Penelle]

thanks, I will try the workaround

[Benoît Penelle]

looking forward for the flag in the settings ;-)

[Benoît Penelle]

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?