我使用parsley.js用于客户端验证。 我有一个名为username字段，它必须是唯一的。现场看起来是这样的：

I am using parsley.js for client-side validation. I have a field called username, which must be unique. The field looks like this:

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

这是我的ajax功能：

This is my ajax function:

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

如果是错误的，我想引发香菜错误，然后显示自定义消息。 有谁知道如何做到这一点。我想是这样的：

If the is an error I would like to trigger a parsley error and then show a custom message. Does anyone know how to do this. I am thinking something like this:

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

我不知道，任何帮助将不胜AP preciated。

I am not sure, any help would be greatly appreciated.

推荐答案

有没有，为什么你不希望使用自定义验证理由吗？ 我认为这是比较明显的，如果你定义一个新的自定义验证时，香菜应用到你的表单。

Is there a reason why you don't want to use a custom validator? I think it is more clear if you define a new custom validator when parsley is applied to your form.

这是我要做的事： 在你输入添加香菜，用户名：

This is how I do it: In your input add "parsley-username":

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

在香菜绑定到你的表单，你应该定义为用户名一个新的自定义验证，是这样的：

When you bind parsley to your form, you should define a new custom validator named "username", like this:

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

这几件事情你应该知道：

A few things you should be aware:

在你的榜样，您可以定义使用PHP常量您的网址。在我的code，我假设你有一个名为SITE_ROOT具有相同的值作为PHP变量的javascrip一个变量。如果插入里面的PHP文件中，此code，它会与你的持续的工作（虽然我不建议更换内使用PHP这个code，这将是内部的JavaScript文件更清晰）。

In your example, you define your URL using a PHP constant. In my code, I assume you have a javascrip variable named SITE_ROOT with the same value as the php variable. If you insert this code inside a php file, it will work with your constant (although, I do not recomend using this code inside php. It will be more clear inside a javascript file).

Ajax请求必须有异步定义为false。这样一来，的code，其余必须等待Ajax来完成。

The ajax request must have async defined to false. This way, the rest of the code must wait for the ajax to be completed.

我的code假定您的AJAX会响应一个JSON对象有一个叫总的属性。它总= 0，用户名不采取。

My code assumes that your AJAX will echo a JSON object with a property called "total". It total = 0, the username is not taken.

这code工作香菜1。*

This code works with parsley 1.*

更新香菜2。*

香菜2.0，输入将具有以下属性：

As of Parsley 2.0, the input will have the following attributes:

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

和你现在必须绑定这样的验证：

And you now must bind the validator like this:

<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验证（看到文档）