Parsley.js 在 AJAX 上触发错误答案

【问题标题】：Parsley.js Trigger Error on AJAXParsley.js 在 AJAX 上触发错误
【发布时间】：2013-12-05 14:35:34
【问题描述】：

我正在使用 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');

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

【问题讨论】：

标签： ajax validation parsley.js

【解决方案1】：

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

这就是我的做法：在您的输入中添加“parsley-username”：

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

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

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

一些你应该知道的事情：

在您的示例中，您使用 PHP 常量定义 URL。在我的代码中，我假设您有一个名为 SITE_ROOT 的 javascrip 变量，其值与 php 变量相同。如果您将此代码插入到 php 文件中，它将与您的常量一起使用（虽然，我不建议在 php 中使用此代码。在 javascript 文件中会更清晰）。
ajax 请求必须将 async 定义为 false。这样，剩下的代码必须等待 ajax 完成。
我的代码假定您的 AJAX 将回显一个带有名为“total”的属性的 JSON 对象。总计 = 0，用户名不被占用。

此代码适用于欧芹 1.*

Parsley 2.* 更新

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

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

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

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

【讨论】：