How To Integrate Codeigniter Form Validation Library and jQuery AJAX ?

In this tutorial, I am showing how to integrate Codeigniter form validation library and jQuery Ajax.

We are using Codeigniter Form Validation class to validate the input fields. If the error exists, form values will not be saved and will display proper validation errors. jQuery and Ajax is used to avoid a full page refresh resulted from a form validation. You can find complete source code ready to be used below. I have used the form directly from codeigniter form validation example.

Controller

/* controller/example.php*/


<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Example extends CI_Controller{

function index()
	{
		$data['include'] = 'jquery_ci_form';
		$this->load->view('template', $data);		
	}
	
	
	function jquery_save()
	{
				
		$this->load->library('form_validation');
		$this->form_validation->set_rules('username', 'Username', 'required|min_length[5]|max_length[12]');
		$this->form_validation->set_rules('password', 'Password', 'required|matches[passconf]');
		$this->form_validation->set_rules('passconf', 'Password Confirmation', 'required');
		$this->form_validation->set_rules('email', 'Email', 'required|valid_email');
		
		if ($this->form_validation->run() == FALSE)
		{
						
			echo json_encode(array('st'=>0, 'msg' => validation_errors()));
		}
		else
		{
			
			$username = $this->input->post('username');
			$password = $this->input->post('password');
			$email = $this->input->post('email');
			
			//...save values to database 
			
			echo json_encode(array('st'=>0, 'msg' => 'Successfully Submiited'));
		}
		
	}
}

Views

/* view/template.php */
<?php $this->load->view('includes/header'); ?>
<?php //$this->load->view('includes/sidebar'); ?>
<?php $this->load->view($include); ?>
<?php $this->load->view('includes/footer'); ?>

/* view/jquery_ci_form.php */
<?php echo form_open('example/jquery_save', array('id'=>'frm')); ?>

<div id="validation-error"></div>

<h5>Username</h5>
<input type="text" name="username" value="<?php echo set_value('username'); ?>" size="50" />

<h5>Password</h5>
<input type="text" name="password" value="<?php echo set_value('password'); ?>" size="50" />

<h5>Password Confirm</h5>
<input type="text" name="passconf" value="<?php echo set_value('passconf'); ?>" size="50" />

<h5>Email Address</h5>
<input type="text" name="email" value="<?php echo set_value('email'); ?>" size="50" />

<div><input type="submit" value="Submit" /></div>

</form>

jQuery

/* assets/js/custom.js*/
$(document).ready(function() {
$('#frm').submit(function(){
	
	$.post($('#frm').attr('action'), $('#frm').serialize(), function( data ) {
	if(data.st == 0)
		{
		 $('#validation-error').html(data.msg);
		}
				
		if(data.st == 1)
		{
		  $('#validation-error').html(data.msg);
		}
				
	}, 'json');
	return false;			
   });

	
});