We will learn how to Codeigniter Ajax Form Validation Example in codeigniter 3 app. 


Step 1:

 Create Routes application/config/routes.php

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


$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;


$route['item'] = "item/index";
$route['itemForm'] = "item/itemForm";

Step 2: 

Create Item Controller application/controllers/Item.php

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


class Item extends CI_Controller {


   /**
    * Get All Data from this method.
    *
    * @return Response
   */
   public function __construct() {
      parent::__construct(); 


      $this->load->library('form_validation');
      $this->load->library('session');
   }


   /**
    * Create from display on this method.
    *
    * @return Response
   */
   public function index()
   {
      $this->load->view('item');
   }


   /**
    * Store Data from this method.
    *
    * @return Response
   */
   public function itemForm()
   {
        $this->form_validation->set_rules('first_name', 'First Name', 'required');
        $this->form_validation->set_rules('last_name', 'Last Name', 'required');
        $this->form_validation->set_rules('email', 'Email', 'required|valid_email');
        $this->form_validation->set_rules('address', 'Address', 'required');


        if ($this->form_validation->run() == FALSE){
            $errors = validation_errors();
            echo json_encode(['error'=>$errors]);
        }else{
           echo json_encode(['success'=>'Record added successfully.']);
        }
    }
}

Step 3: 

Create View File application/views/item.php

<!DOCTYPE html>
<html>
<head>
	<title>Codeigniter Ajax Validation Example</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>
<body>


<div class="container">
	<h2>Codeigniter Ajax Validation</h2>


	<div class="alert alert-danger print-error-msg" style="display:none">
    </div>


	<form>
		<div class="form-group">
			<label>First Name:</label>
			<input type="text" name="first_name" class="form-control" placeholder="First Name">
		</div>


		<div class="form-group">
			<label>Last Name:</label>
			<input type="text" name="last_name" class="form-control" placeholder="Last Name">
		</div>


		<div class="form-group">
			<strong>Email:</strong>
			<input type="text" name="email" class="form-control" placeholder="Email">
		</div>


		<div class="form-group">
			<strong>Address:</strong>
			<textarea class="form-control" name="address" placeholder="Address"></textarea>
		</div>


		<div class="form-group">
			<button class="btn btn-success btn-submit">Submit</button>
		</div>
	</form>
</div>


<script type="text/javascript">


	$(document).ready(function() {
	    $(".btn-submit").click(function(e){
	    	e.preventDefault();


	    	var _token = $("input[name='_token']").val();
	    	var first_name = $("input[name='first_name']").val();
	    	var last_name = $("input[name='last_name']").val();
	    	var email = $("input[name='email']").val();
	    	var address = $("textarea[name='address']").val();


	        $.ajax({
	            url: "/itemForm",
	            type:'POST',
	            dataType: "json",
	            data: {first_name:first_name, last_name:last_name, email:email, address:address},
	            success: function(data) {
	                if($.isEmptyObject(data.error)){
	                	$(".print-error-msg").css('display','none');
	                	alert(data.success);
	                }else{
						$(".print-error-msg").css('display','block');
	                	$(".print-error-msg").html(data.error);
	                }
	            }
	        });


	    }); 


	});


</script>


</body>
</html>

Now we are ready with this example