Bits ‘n Bytes

I use CodeIgniter’s Form Validation library for back-end and jQuery Validation plugin for front-end validation. For my latest project I decided to combine them and here’s what I got so far.

First things first – demo and source code.

jQuery Validation plugin has this handy remote() method, that basically sends AJAX request to back-end script with form field data. Response from back-end script is evaluated as JSON and must be true for valid fields. When string is returned, form field is treated as invalid and returned string is displayed as error message. This allows to return standard CI Form Validation error messages. The code below is an example of back-end script that can handle remote() method from jQuery Validation plugin. You would place this function as a method in your controller where form logic is handled.

public function remote()
{
	// Set JSON headers, no cache
	header('Cache-Control: no-cache, must-revalidate');
	header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
	header('Content-type: application/json');
 
	$field_name = key($_POST);
 
	// Load validation rules set in constructor
	$this->form_validation->set_rules($this->form_rules);
 
	// For JSON response, we don't want error delimiters
	$this->form_validation->set_error_delimiters('', '');
 
	// run_single() is a method extended from core validation library
	if ($this->form_validation->run_single($field_name) == FALSE)
	{
		$response = validation_errors();
	}
	else
	{
		$response = TRUE;
	}
 
	echo json_encode($response);
}

Notice CI Form Validation library is calling run_single() method. I extended base library to add this method, it work exactly the same as standard run() method, but checks only one field. You will need to copy/download my extended validation library to your /application/libraries/MY_Form_validation.php file. This extended library also has helper method called jquery_options() method, that generates JSON encoded string containing validation rules in a format acceptable to jQuery Validation plugin. You can write your own rules in your view file, but this definitely makes it easier.

Speaking of the view file, you will need jQuery and jQuery Validation plugin loaded. Both of them have CDNs, so you can load them like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/javascript"></script>

When required JavaScript files are loaded, you need to call validate() method on your form selector and pass parameters as JSON string generated by jquery_options() method from my extended validation library. Here’s an example:

<script type="text/javascript">
	$(document).ready(function(){
		$('#signupform').validate(<?php echo $jquery_validation ?>);
	});
</script>

I uploaded the whole application folder to Bitbucket – here, but you only need these 3 files to see how t works:

/application/libraries/MY_Form_validation.php
/application/controllers/form.php
/application/views/form.php