Parsley.js remote validation response still validates to true after ParsleyUI.addError

Question

I have this form:

<form method="post" id="myForm" data-parsley-validate>
<input type="text" name="firstName" id="firstName" required>
<input type="text" name="lastName" id="lastName" required>
<input type="text" name="userName" id="userName" 
            data-parsley-trigger="focusout" 
            data-parsley-remote
            data-parsley-remote-options='{ "type": "POST" }'
            data-parsley-remote-validator='validateName'
            required>
<input type="button" id="formSave" name="submit" value="Next">
</form>

And script:

var userName = $('#userName').parsley();
var _xsrf = $("[name='_xsrf']").val();
$('#myForm').parsley()
    .addAsyncValidator('validateName', function(xhr) {
        window.ParsleyUI.removeError(userName, 'name-exists');
        if (xhr.status == '404') {
            window.ParsleyUI.addError(userName, 'name-exists', "Name already exists.");
            return 404;
        } else if (xhr.status == '200') {
            return 200;
        }
    }, '/validate/?country=' + country + '&_xsrf=' + _xsrf);

The error message is displayed correctly if user already exists, however the field is still validated as correct.

Doing this was so easy in v1 of Parsley.js : /

Answer 1

I have made some changes to your html and js:

<form method="post" id="myForm">
    <input type="text" name="_xsrf" id="_xsrf" value="test">
    <input type="text" name="userName" id="userName" 
            data-parsley-trigger="focusout"
            data-parsley-remote
            data-parsley-remote-options='{ "type": "POST" }'
            data-parsley-remote-validator="validateName"
            data-parsley-remote-message="Name already exists."
            required>
    <!--<input type="button" id="formSave" name="submit" value="Next">-->
    <input type="submit" id="formSave" name="formSave" value="Next">
</form>

It is not a good idea to set submit as the name of your button. Check this answer and this answer.

In your javascript, append the addAsyncValidator to your field instead of the form. As for the validator response, it has to return true of false. If you want your field to be valid when you get a 200 response, then you must use

return xhr.status === 200

If you assume that the field is valid when the status response is 404, then you should use:

return xhr.status === 404

Here is the code that worked for me. If you use a valid URL that returns a 404 status code, the error will be displayed and the form will not be validated.

var _xsrf = $("#_xsrf").val();
var userName = $("#userName").parsley()
    .addAsyncValidator('validateName', function (xhr) {
         return xhr.status === 200;
    }, 'http://localhost/parsley/CheckEmailAvailability.php?_xsrf=' + _xsrf);

$( "#myForm" ).parsley();

$("#myForm" ).submit(function( event ) {
    $(this).parsley("validate");
    if ($(this).parsley("isValid")) {
        console.log('valid');
    }
    event.preventDefault();
});

See this jsfiddle for the full code. Since you have to perform a server request, the form will never be validated (due to Access-Control-Allow-Origin). However, if you test this locally with a valid request, it will work.