Parsley.js ответ удаленной проверки по-прежнему подтверждает значение true после ParsleyUI.addError
-
21-12-2019 - |
Вопрос
У меня есть эта форма:
<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 :/
Решение
Я внес некоторые изменения в ваш 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).Однако, если вы протестируете это локально с помощью действительного запроса, это сработает.