How can I make Parsley remote validator wait for a response? Code Answer

I have inherited some code using Parsley JS validation, and I need to set a remote email checking rule. It is a two step form, on successful validation of the email part, the second part of the form is revealed through css.

I have added the following attributes to the form element;

data-parsley-remote="/members/members_email_check"
data-parsley-remote-message="This email address is already registered"

The existing form validation call looks like this;

$('.reg-step-next').on('click touchstart', function (e) {
    e.preventDefault();
    if ($('form.register-form').parsley().validate($('.reg-step.active').data('parsley-group'))) {
        $(this).parents('.reg-step').removeClass('active').next('.reg-step').addClass('active');
    }
});

The server email checking works correctly – the call is made and 200/40x code is returned as expected.

The problem I have is the validate() call is not waiting for a response from the remote validation and immediately returns null (indicating remote validation is in process I think) and never proceeds to the next step.

I am aware of the asynchronous paradigm that is causing my problems here, but can’t see how to set up a callback for remote validation. I could of course create my own async call outside of Parsley, but then I miss out on other Parsley benefits, and have to do extra work to inject error messages etc.

Answer

Instead of validate, use whenValidate…

This returns a promise, so you can show the second part of your form when it gets resolved.

PS: Be sure to upgrade to version 2.2.0