jquery - 从服务器验证后如何动态放置 JQuery 错误标签

Question

我正在处理注册表单。我已经验证了 required、minlength 等字段，并将验证错误消息放在这样的元素之前：

$('#register').validate(
{
    rules: 
    {
        username: 
        {
            required: true,
            minlength: 6
        },
        email: 
        {
            required: true,
            email: true
        },
        password: 
        {
            required: true,
            minlength: 8
        },
        confirmPassword: 
        {
            required: true,
            equalTo: '#password'
        }
    },
    messages: 
    {
        username:
        {
            required: 'Please enter username',
            minlength: 'Username too short'
        },
        email: 
        {
            required: 'Please enter email',
            email: 'Invalid E-Mail'
        },
        password:
        {
            required: 'Please enter password',
            minlength:'Password too short'
        },
        confirmPassword: 
        {
            required: 'Please provide password',
            equalTo: 'Passwords don\'t match'
        }
    },
    errorPlacement: function(error, element)
    {
        error.insertBefore(element);
    }
});

客户端验证时一切都很好，但我也必须检查服务器端验证，比如用户名重复、电子邮件重复......所以如果用户名已经存在，我必须再次在元素之前放置验证错误消息，那会怎么样呢？我已经完成了所有 ajax、请求和 php/mysql 编码并返回错误消息。只是我必须在与 jquery 验证具有相同样式的元素之前显示。

Answer 1

您可以为每个元素添加自定义验证函数。例如说您需要将 ajax 验证添加到“用户名”字段，这可以按如下方式完成

$.validator.addMethod("validateUserName", function(val, element) {

    $.ajax({
        type : "post",
        async: false,
        url : YOUR_URL,
        data : {'username': val},
        dataType : 'json',
        error : function(jqXHR, textStatus, errorThrown){
            //alert("some error occured while submitting the form");
            return false;
        },
        success : function(  response,  textStatus,  jqXHR ){
            //Assuming you return true in server reply
            if( response.status == true ){
                //Username valid
                return true;
            } else {
                //Invalid Username
                return false;
            }
        }
    });
}, "Username Already exists.");

你的验证js看起来像这样

$('#register').validate(
{
    rules: 
    {
        username: 
        {
            required: true,
            minlength: 6,
            validateUserName: true,
        },
 .....

所以现在当有重复的用户名时，自定义错误“用户名已经存在”。将显示在其错误标签中。

Answer 2

在这里，它奏效了。请更正您的代码，所以我应该将其标记为正确答案。

var isSuccess ;
$.validator.addMethod('validateUserName', function(val, element)
{
    $.ajax(
    {
     type : 'post',
     async: false,
     url :  'include/validateUser.php',
     data : {'username': val},
     dataType : 'json',
     error : function(jqXHR, textStatus, errorThrown)
     {
        alert('some error occured while submitting the form');
     },
     success : function(response,  textStatus,  jqXHR )
     {
        isSuccess = response ;
     }
    });
   return isSuccess ;
}, 'Username Already exists.');