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

【问题标题】：How to place JQuery error label dynamically after validating from server从服务器验证后如何动态放置 JQuery 错误标签
【发布时间】：2013-01-31 05:20:50
【问题描述】：

我正在处理注册表单。我已经验证了 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 验证相同样式的元素之前显示。

【问题讨论】：

errorPlacement 怎么叫？
请输入用户名

标签： jquery jquery-validate

【解决方案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,
        },
 .....

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

【讨论】：

这有帮助吗？请提供您的反馈。
我还没有尝试过，但我相信它会工作的。我现在正在尝试。
它没有用。无论从服务器返回什么布尔值（真或假），它都会显示消息：“用户名已经存在。”除了你为什么添加语句： var usernameVal = $(element).val();当文本字段的值已经在 val 参数中时。
是的，您可以选择 val 或 $(element).val() 此外，由于我们在函数中进行 ajax 调用，因此函数“validateUserName”不会等待 ajax 响应完成。我正在考虑一种解决方法，您可以等待我对上述内容的更新。
我已经更新了上面的代码使ajax调用同步进行，这样函数将等待ajax调用的响应并相应地返回响应。我在 ajax 调用中添加了“async: false”

【解决方案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.');

【讨论】：