Parsley.js ответ удаленной проверки по-прежнему подтверждает значение true после ParsleyUI.addError

Question

У меня есть эта форма:

<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>

И сценарий:

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);

Сообщение об ошибке отображается корректно, если пользователь уже существует, однако поле по-прежнему проверяется как правильное.

Сделать это было так просто в версии 1 из Parsley.js :/

Answer 1

Я внес некоторые изменения в ваш html и 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>

Это не очень хорошая идея - устанавливать submit как название вашей кнопки.Проверять этот ответ и этот ответ.

В вашем javascript добавьте следующее addAsyncValidator в ваше поле вместо формы.Что касается ответа валидатора, то он должен возвращать true от false.Если вы хотите, чтобы ваше поле было действительным, когда вы получите 200 ответ, тогда вы должны использовать

return xhr.status === 200

Если вы предполагаете, что поле является допустимым, когда ответ о состоянии равен 404, тогда вам следует использовать:

return xhr.status === 404

Вот код, который сработал у меня.Если вы используете допустимый URL-адрес, который возвращает 404 код состояния, будет отображена ошибка, и форма не будет проверена.

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();
});

Видеть этот jsfiddle для получения полного кода.Поскольку вам необходимо выполнить запрос к серверу, форма никогда не будет проверена (из-за Access-Control-Allow-Origin).Однако, если вы протестируете это локально с помощью действительного запроса, это сработает.