ajax - AJAX 上的 Parsley.js 触发错误

Question

我正在使用 parsley.js 进行客户端验证。我有一个名为用户名的字段，它必须是唯一的。该字段看起来像这样:

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

这是我的 ajax 函数:

function validateField(field)
{
    var isValid = $( '#'+field ).parsley( 'validate' );
    if (!isValid) return false;
    return true;
}

$( '#regUsername' ).blur(function(){
    if (!validateField('regUsername')) return false;
    var username = $(this).val();
    $.post('<?= SITE_ROOT; ?>/ajax/ajaxUserActions.php',
    {
        data: 'checkUniqueUsername',
        username: username
    }, 'json')
    .done(function(data){            
        if (data.error)
        {                
        }            
    })
    .fail(function(){ $( '#loader' ).hide(); });
});

如果这是一个错误，我想触发一个欧芹错误，然后显示一条自定义消息。有谁知道如何做到这一点。我在想这样的事情:

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

我不确定，如有任何帮助，我们将不胜感激。

Answer 1

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

我是这样做的:在您的输入中添加“parsley-username”:

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

当您将 parsley 绑定(bind)到您的表单时，您应该定义一个名为“用户名”的新自定义验证器，如下所示:

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

一些你应该知道的事情:

1. 在您的示例中，您使用 PHP 常量定义 URL。在我的代码中，我假设您有一个名为 SITE_ROOT 的 javascrip 变量，其值与 php 变量相同。如果您将此代码插入 php 文件中，它将使用您的常量(尽管我不建议在 php 中使用此代码。在 javascript 文件中它会更清晰)。

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

3. 我的代码假定您的 AJAX 将回显一个具有名为“total”的属性的 JSON 对象。总计=0，用户名未被占用。

此代码适用于 parsley 1.*

Parsley 2 更新*

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

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

现在您必须像这样绑定(bind)验证器:

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

另一种可能性是使用内置的远程 ajax 验证器 ( see the docs )