Validating ParsleyJS with addAsyncValidator()

Question

I'm having trouble validating a form that uses an AJAX call to validate form fields.

I've narrowed down the code to this sample.

Here's the content of a file named: so-parsley-question-always-false.txt

false

This is the form html:

<form name="Update" id="Update" method="post">
    <input type="text" name="Zone1" id="Zone1" size="4"
        data-parsley-remote
        data-parsley-remote-validator="validateZone"
        value="">
    <br>

    <input type="text" name="Zone2" id="Zone2" size="4"
        data-parsley-remote
        data-parsley-remote-validator="validateZone"
        value="">
    <br>

    <input type="button" name="btnUpdate" id="btnUpdate" value="Update">
    <br>
</form>

Here's the jquery/parselyjs script:

<script>
"use strict";

jQuery(document).ready(function ($) {
    $('#Update').parsley(/* options */);

    $(document.body).on('click', '#btnUpdate', function (e) {
        e.preventDefault();

        $("#Update").parsley().whenValidate({force: true}).done(function () {
            console.log('submit form code - expecting a form without errors, but this is displayed whether or not there are validation errors');

            // submit the form if valid
        }); // /whenValidate().done()
    });

    window.Parsley.addAsyncValidator("validateZone", function (xhr) {
        // reset error
        this.removeError("remote", {updateClass: true});

        if (xhr.responseText === "true") {
            console.log('Zone good.');
            return 200;
        }
        if (xhr.responseText === "false") {
            console.log('Zone bad.');
            this.addError("remote", {message: 'Invalid zone' });
            return 404;
        }

        // if xhr.status == 404, then a different error has happened, return 404 for an invalid zone
        if (404 === xhr.status) {
            console.log('Zone i/o error.');
            r = $.parseJSON(xhr.responseText);
            this.addError("remote", {message: r.error });
        }

        return 200 === xhr.status;
    }, "/so-parsley-question-always-false.txt", {
        data: {
            method: "zoneExists"
        }
    }); // /.addAsyncValidator()

});
</script>

The data structure is just a placeholder for the actual code, it is ignored in this sample.

When the form button is clicked, I had expected it to validate the form, making the ajax call and end up in the parsley().whenValidate().done() block. However, it always ends up in this block regardless of whether the results from the AJAX call are true or false.

I know that the AJAX call is happening as 'Zone bad.' will appear in the console log twice.

The odd thing is that the parsley error messages for the fields are correct with 'Invalid zone'. However, the fields are highlighted in green as though they are valid.

When a non-asynchronous parsley validation is added you can use parsley().isValid() to determine if the form is valid. With async calls, this function will always return null.

https://parsleyjs.org/doc/#remote-custom

There is an addValidator() function that can make AJAX calls. When I used that function parsley would call the validator twice for every field and I'd get similar results as addAsyncValidator(), fields would have error messages but have green background.

I'm hoping that I'm missing something really simple. How can I validate the form and know that all of the zone fields are valid. In my use case, there may be a lot more than two zones.