Bootstrap sample layout

http://bit.ly/1n1cKke

HTML page layout

Ref: http://stackoverflow.com/questions/19192211/css-how-to-style-a-footer

html, body {
 height: 100%;
 margin: 0;
}

main {
 min-height: 100%;
 margin-bottom: -10px;
 background: #ddd;
 width: 600px; margin: 0 auto -10px;
}

main:after {
 content: "";
 display: block;
 height: 10px;
}

footer {
 height: 10px;
 background: #eee;
 width: 600px;
 margin: 0 auto -10px;
}

How to unset form values after success

Ref: http://stackoverflow.com/questions/2802046/codeigniter-form-validation-how-to-unset-form-values-after-success

 $this->load->library('form_validation');

    $this->form_validation->set_rules('firstname', 'First Name', 'required');
    $this->form_validation->set_rules('surname', 'Sur Name', 'required');

    if ($this->form_validation->run() === TRUE)
    {
                    // save data

        $this->session->set_flashdata('message', 'New Contact has been added');
        redirect(current_url());
    }

    $this->load->view('contacts/add', $this->data);

jQuery validation plugin example

URL: http://jqueryvalidation.org/

 $(document).ready(function() {
        $("#frm").validate({
            errorClass: 'error',
            rules: {
                name: {
                    required:true,
                    alphanumeric: true
                },
                email: {
                    required: true,
                    email: true
                },
                address: "required"
            },
            messages: {
                name:{
                    alphanumeric: "Alphanumeric charactors only...!"
                },
                email: {
                    required: "We need your email address to contact you",
                    email: "Your email address must be in the format of name@domain.com"
                }              
            }
        });
    });