AJAX上的Parsley.js触发器错误

我正在使用parsley.js进行客户端验证。 我有一个名为username的字段，它必须是唯一的。该字段如下所示：

<input type="text" name="loginUsername" id="loginUsername" class="form-control" placeholder="Username" data-minlength="2" data-maxlength="40" data-required="true">

$('#regUsername').attr('data-error-message', 'Username Taken').trigger('parsley-error');

<script type="text/javascript">
$( '#form' ).parsley( {
    validators: {
      username: function() {
            return {
                validate: function(val) {
                    var response = false;

                    $.ajax({
                        url: SITE_ROOT +  "ajax/ajaxUserActions.php",
                        data: {'username': val, 'data': 'checkUniqueUsername'},
                        dataType: 'json',
                        type: 'get',
                        async: false,
                        success: function(data) {
                            if (data.total > 0)
                                response = false;
                            else
                                response = true;
                        },
                        error: function() {
                            response = false;
                        }
                    });

                    return response;
                },
                priority: 32
            }
        }
    }
  , messages: {
      username: "Your username is already taken. Please insert other value"
    }
} );
</script>

<script type="text/javascript">
    window.ParsleyValidator
        .addValidator('username', function (value, requirement) {
             var response = false;

               // Your code to perform the ajax, like before

                return response;
        }, 32)
        .addMessage('en', 'username', 'Your username is already taken.');
</script>

---

我不确定，任何帮助都将不胜感激。

您不想使用自定义验证器的原因是什么？ 我认为，在将欧芹应用于表单时，如果您定义一个新的自定义验证器，会更清楚

我就是这样做的： 在输入中添加“欧芹用户名”：

将欧芹绑定到表单时，应定义一个名为“username”的新自定义验证器，如下所示：

<input type="text" name="loginUsername" id="loginUsername" class="form-control" placeholder="Username" data-minlength="2" data-maxlength="40" data-required="true">

$('#regUsername').attr('data-error-message', 'Username Taken').trigger('parsley-error');

<script type="text/javascript">
$( '#form' ).parsley( {
    validators: {
      username: function() {
            return {
                validate: function(val) {
                    var response = false;

                    $.ajax({
                        url: SITE_ROOT +  "ajax/ajaxUserActions.php",
                        data: {'username': val, 'data': 'checkUniqueUsername'},
                        dataType: 'json',
                        type: 'get',
                        async: false,
                        success: function(data) {
                            if (data.total > 0)
                                response = false;
                            else
                                response = true;
                        },
                        error: function() {
                            response = false;
                        }
                    });

                    return response;
                },
                priority: 32
            }
        }
    }
  , messages: {
      username: "Your username is already taken. Please insert other value"
    }
} );
</script>

<script type="text/javascript">
    window.ParsleyValidator
        .addValidator('username', function (value, requirement) {
             var response = false;

               // Your code to perform the ajax, like before

                return response;
        }, 32)
        .addMessage('en', 'username', 'Your username is already taken.');
</script>

$（'形式'）。欧芹（{
验证器：{
用户名：function（）{
返回{
验证：功能（val）{
var响应=假；
$.ajax({
url:SITE_ROOT+“ajax/ajaxUserActions.php”，
数据：{'username'：val，'data'：'checkUniqueUsername'}，
数据类型：“json”，
键入：“get”，
async:false，
成功：功能（数据）{
如果（data.total>0）
响应=错误；
其他的
响应=真；
},
错误：函数（）{
响应=错误；
}
});
返回响应；
},
优先：32
}
}
}
，讯息：{
用户名：“您的用户名已被占用。请插入其他值”
}
} );

您应该注意以下几点：

在您的示例中，使用PHP常量定义URL。在我的代码中，我假设您有一个名为SITE_ROOT的javascrip变量，该变量的值与php变量的值相同。如果在php文件中插入此代码，它将与常量一起工作（尽管我不建议在php中使用此代码，但在javascript文件中会更清楚）

ajax请求必须将async定义为false。这样，代码的其余部分必须等待ajax完成

我的代码假设您的AJAX将使用名为“total”的属性回送JSON对象。It total=0，不使用用户名

此代码适用于欧芹1*

欧芹2的更新。*

从Parsley 2.0开始，输入将具有以下属性：

<input type="text" name="loginUsername" id="loginUsername" class="form-control"
    placeholder="Username" data-parsley-required data-parsley-username >

现在必须像这样绑定验证器：

<input type="text" name="loginUsername" id="loginUsername" class="form-control" placeholder="Username" data-minlength="2" data-maxlength="40" data-required="true">

$('#regUsername').attr('data-error-message', 'Username Taken').trigger('parsley-error');

<script type="text/javascript">
$( '#form' ).parsley( {
    validators: {
      username: function() {
            return {
                validate: function(val) {
                    var response = false;

                    $.ajax({
                        url: SITE_ROOT +  "ajax/ajaxUserActions.php",
                        data: {'username': val, 'data': 'checkUniqueUsername'},
                        dataType: 'json',
                        type: 'get',
                        async: false,
                        success: function(data) {
                            if (data.total > 0)
                                response = false;
                            else
                                response = true;
                        },
                        error: function() {
                            response = false;
                        }
                    });

                    return response;
                },
                priority: 32
            }
        }
    }
  , messages: {
      username: "Your username is already taken. Please insert other value"
    }
} );
</script>

<script type="text/javascript">
    window.ParsleyValidator
        .addValidator('username', function (value, requirement) {
             var response = false;

               // Your code to perform the ajax, like before

                return response;
        }, 32)
        .addMessage('en', 'username', 'Your username is already taken.');
</script>

窗式欧芹验证器
.addValidator（'username'，函数（值，要求）{
var响应=假；
//您的代码可以像以前一样执行ajax
返回响应；
}, 32)
.addMessage（'en'、'username'、'您的用户名已被占用'）；

另一种可能是使用内置的远程ajax验证器（）