Question

我正在处理注册表单。我已经验证了所需的字段，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.');

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

2 个答案: