Monday, October 14, 2013

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

	
});

6 comments:

  1. looks great and simple, but 'valid_email' in form validation rules not working for me! :/

    ReplyDelete
    Replies
    1. It worked for me. May be It has to do something with Codeigniter Version.

      For now Try this solution (Weird I know),

      You must set valid_email as a third parametr (not second) and if statement before inputting posts. Try this: $this->form_validation->set_rules('email', 'Email', 'trim|required|valid_email');

      Hope this solves your problem.

      Delete
  2. thank you, it works perfectly.
    but, can I add a class on the result? how?

    ReplyDelete
  3. Thanks this code is working fine

    ReplyDelete