Codeigniter Form Validation Library and jQuery AJAX ?

I am showing how to integrate Codeigniter form validation library and jQuery Ajax

Codeigniter Form Validation Library

We are using the Codeigniter Form Validation Library 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 are used to avoid a full page refresh resulted from form validation.

CodeIgniter provides a comprehensive form validation and data prepping class that helps minimize the amount of code you’ll write. Visit Documentation Page.

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

});

Summary

Codeigniter Form Validation Library. Before explaining CodeIgniter’s approach to data validation, let’s describe the ideal scenario:

  1. A form is displayed.
  2. You fill it in and submit it.
  3. If you submitted something invalid, or perhaps missed a required item, the form is redisplayed containing your data along with an error message describing the problem.
  4. This process continues until you have submitted a valid form.

On the receiving end, the script must:

  1. Check for the required data.
  2. Verify that the data is of the correct type, and meets the correct criteria. For example, if a username is submitted it must be validated to contain only permitted characters. It must be of a minimum length, and not exceed a maximum length. The username can’t be someone else’s existing username, or perhaps even a reserved word. Etc.
  3. Sanitize the data for security.
  4. Pre-format the data if needed (Does the data need to be trimmed? HTML encoded? Etc.)
  5. Prep the data for insertion in the database.

Although there is nothing terribly complex about the above process, it usually requires a significant amount of code, and to display error messages, various control structures are usually placed within the form of HTML. Form validation, while simple to create, is generally very messy and tedious to implement.

Check This Also

Difference between AngularJS and Angular 2 Make a Mobile app in just 10 minutes With Ionic Framework Angular 9: What to Expect in New Version of Angular Alert (Toaster) Notifications in Angular 8