parsleui . adderror之后，Parsley.js的远程验证响应仍然验证为true

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

本文关键字：验证 响应 true 程验证 之后 adderror Parsley js parsleui      更新时间：2023-09-26

我有这样一个表单:

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

如果user已经存在，则正确显示错误消息，但是该字段仍然被验证为正确。

这样做是很容易在v1的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附加到您的字段而不是表单。对于验证器响应，它必须返回false中的true。如果您希望您的字段在获得200响应时有效，那么您必须使用

return xhr.status === 200

如果您假设该字段在状态响应为404时是有效的，那么您应该使用:

return xhr.status === 404

这是为我工作的代码。如果您使用返回404状态码的有效URL，则会显示错误，并且表单不会被验证。

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

查看完整代码。由于必须执行服务器请求，因此表单将永远不会被验证(由于Access-Control-Allow-Origin)。但是，如果您在本地用一个有效的请求测试它，它将工作。

相关文章：