使用jQuery验证和回调

时间:2013-11-09 15:50:29

标签: php jquery json jquery-validate

使用下面的代码,我正在验证我的客户端验证的注册表单,并使用post方法将表单提交到我的php页面并返回一个json对象供我的jquery处理。正如您所看到的,我已经为初始验证设置了一些规则和消息,以便在客户端进行处理。在php方面,我让它报告请求的状态,向用户发送消息以及可能存在的任何错误。我想知道的是,如果有错误我应该如何处理它,并且我希望我的表单以与用户在跳过的情况下应该看到的相同的方式向用户显示错误。

我希望看到的是因为我的json对象存在示例错误消息,它看到它附加到相应的字段名称并以某种方式将相同的类应用于消息。

我的输出数组如下所示:

{
    "status":"error",
    "message":"The following form did not validate successfully. Please fix the form errors and try again.",
    "errors":
    {
        "username":"This username is already available",
        "email_address":"This email address is already available"
    }
}

Jquery验证

$.validator.setDefaults(
{
    submitHandler: function() { alert("submitted!"); },
    showErrors: function(map, list) 
    {
        this.currentElements.parents('label:first, div:first').find('.has-error').remove();
        this.currentElements.parents('.form-group:first').removeClass('has-error');

        $.each(list, function(index, error) 
        {
            var ee = $(error.element);
            var eep = ee.parents('label:first').length ? ee.parents('label:first') : ee.parents('div:first');

            ee.parents('.form-group:first').addClass('has-error');
            eep.find('.has-error').remove();
            eep.append('<p class="has-error help-block">' + error.message + '</p>');
        });
    }
});

$(function()
{
    $("#register_form").validate({
        rules: {
            username: {
                required: true,
            },
            password: {
                required: true,
                minlength: 6,
                maxlength: 12
            },
            email_address: {
                required: true,
                email: true
            },
        },
        messages: {
            username: {
                required: "Please enter a username",
            },
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 6 characters long",
                maxlength: "Your password must be no more than 12 characters long"
            },
            email_address: {
                required: "Please provide an email address",
                email: "Please enter a valid email address"
            }
        },
        submitHandler: function(form) {
            var uri = "/register/process";
            $.post(uri, $( "#register_form" ).serialize(), function(output)
            {
                if (output.status == "notice")
                {
                    /*
                    notyfy({
                        text: output.message,
                        type: 'alert',
                        layout: 'center',
                        closeWith: ['click']
                    });
                    */                    
                }
                else if(output.status == "error")
                {
                    // Show errors even if jQuery validation missed some from server side validation.  

                    notyfy({
                        text: output.message,
                        type: 'error',
                        layout: 'center',
                        closeWith: ['click']
                    });
                }
                else if(output.status == "success")
                {   
                    // Works
                    notyfy({
                        text: output.message,
                        type: 'success',
                        layout: 'center',
                        closeWith: ['click']
                    });  
                }
                else
                {
                    /*
                    notyfy({
                        text: output.message,
                        type: 'warning',
                        layout: 'center',
                        closeWith: ['click']
                    });
                    */
                }
            }, 'json');
            return false;
        }
    });
});

我一直试图从jquery验证插件的文档中了解该怎么做,并认为我忽略了一些东西。有人知道或有任何建议吗?任何评论都将被接受。

0 个答案:

没有答案