Using jQuery and Codeigniter

[eluser]xtremer360[/eluser]
I am working with my registration form to validate both on the front-end and backend of my application. On the front end of my application I am using jQuery's validation plugin to handle the form field requirements. When the registration form is displayed the user enters their information and clicks the submit button. An ajax request is then made sending post data to the process function of the register controller. After the controller gathers the data and works its way through the code it will then send back a json encoded data object to the client side for display to the user.

As you can see I have set up some rules and messages for the initial validation to handle on the client side. On the php side I have it reporting back a status of the request, a message to the user, and any errors that might be present.

I am wanting to know is how should I handle it if there are errors and I want my form to display the errors back to the user in the same exact way that that the user should have seen them in the case it got skipped.

What I would like to see happen is for as the example error messages exist from my json object have it see that its attached to the respective field names and apply the same class with the message somehow.

My output array looks like this:

Code:

{
    "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 Validation

Code:

$.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;
        }
    });
});