Codeigniter Ajax Registration Form with Validation

In this tutorials, I have explained about how to create a simple ajax registration form with server-side validation. To validating the form I have used Codeigniter Form validation library. The validation library you can easily set custom rule, success, error messages.

Live Demo Download

Database

Create sample table name called users and below contain the column fields.

CREATE TABLE IF NOT EXISTS `users` (
`id` int(11) NOT NULL,
  `email` varchar(100) NOT NULL,
  `username` varchar(250) NOT NULL,
  `password` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Set your database connection config/database.php file.

Controller

Welcome.php

Create new controller class name 'welcome' and add the below object functions.

<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
        $this->load->helper(array('form', 'url'));
        $this->load->library('form_validation');
    }

    public function signup()
    {
        $this->load->view('signup');
    }

    public function ajax_signup()
    {
        // Validation code
       $this->form_validation->set_rules('username', 'Username', 'trim|required');
       $this->form_validation->set_rules('password', 'Password', 'trim|required');
       $this->form_validation->set_rules('passconf', 'Password Confirmation', 
        'trim|required|matches[password]');
       $this->form_validation->set_rules('email','Email','required|is_unique[users.email]');
        $this->form_validation->set_message('is_unique', 'The %s is already taken');
        //is_unique check the unique email value in users table

        if ($this->form_validation->run() == FALSE):
                $this->load->view('signup');            
        else :
            $data = array(
                'username'=>$this->input->post('username'),
                'email'=>$this->input->post('email'),
                'password'=>md5($this->input->post('password')),
            ); //insert code
            $this->db->insert('users',$data);
            unset($_POST);
            $this->load->view('formsuccess');
            //success page. 
        endif;
    }

}

Folder path : applications/controllers/welcome.php
Url access path : http://your host name/projectfolder/index.php/welcome/signup

$this->load->helper,Library - While loading the controller function Construct load with the URL and form helper along with form validation library. It should be required to validate the form.

Example validation rules :

$this->form_validation->set_rules('username', 'Username', 'trim|required');

Ajax controller function

if ($this->form_validation->run() == FALSE):
   // display singup page           
else :
   //Insert form data 
   //success page. 
endif;

View

Here i have created 2 files for display success message (formsucess.php) and HTML form element (signup.php). After inserted the ajax form post data to the database success form should display on the front end side.

Signup.php

<html>
<body>
<div class="ajax_response_result">
<form id="reg_form">
    <h5>Name</h5>
    <input type="text" name="username" value="<?php echo set_value('username'); ?>" />
    <div class="errorMessage"><?php echo form_error('username'); ?></div>
    <h5>Email Address</h5>
    <input type="text" name="email" value="<?php echo set_value('email'); ?>" />
    <div class="errorMessage"><?php echo form_error('email'); ?></div>
    <h5>Password</h5>
    <input type="text" name="password" value="<?php echo set_value('password'); ?>" />
    <div class="errorMessage"><?php echo form_error('password'); ?></div>
    <h5>Password Confirm</h5>
    <input type="text" name="passconf" value="<?php echo set_value('passconf'); ?>" />
    <div class="errorMessage"><?php echo form_error('passconf'); ?></div>
    <div><input type="button" id="click_form" value="Submit" /></div>
</form>
</div>
</body>
</html>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {   
   $('#click_form').click(function(){
    jQuery.ajax({
    type: "POST",
    url: "<?php echo site_url('welcome/ajax_signup') ?>",    
    data: $("#reg_form").serialize(),
    success: function(res) {
        $(".ajax_response_result").html(res);
     }
    });
  });
});
</script>

<?php echo form_error('username'); ?> - Display the form validation error
$('#click_form'). - After click this id form data will transfer to the Welcome/ajax_singup controller function.
.ajax_response_result - this class replace html data based on the ajax response.

formsuccess.php

After get the ajax success responses class="ajax_response_result" <div> replace to the success page.

<h3>Data inserted sucessfully.</h3>

The above signup script I have created very simple HTML and ajax code. You can modify the design based on your design needs. I hope this tutorial helpful for you.

Menu Link

28 June, 2016