Codeigniter Ajax Form Validation Example
In this post we will give you information about Codeigniter Ajax Form Validation Example. Hear we will give you detail about Codeigniter Ajax Form Validation ExampleAnd how to use it also give you demo for it if it is necessary.
Today, I would like to share with you how to create jquery ajax form validation in codeigniter 3 app. Here i will create simple form and make it server side validation using form_validation library. form_validation will help to easily set custom rule, success, error messages.
Validation is very important part of every project. If you are doing login form, registration form, contact us form, comments etc. You must require to set form validation. Codeigniter provide form_validation library for set server side validation, but if we make it simple then it always refresh page, so it would be better if you use jquery ajax for form validation.
So here i gave you full example of form validation in codeigniter application. i created simple form with first name, last name, email and address like contact us form and i set server side validation using ajax. So let’s simple see bellow step and make it ajax validation quick.
Step 1: Create Routes
In first step we require to add two route for display form and post form. so open routes.php file and add code like as bellow:
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
In this step, we need to create Item Controller and define two methods, index() and itemForm(), Here we will also load form_validation and session library. So let’s proceed.
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
In last step, we need to create view file, So here create item.php view file and copy bellow code, here we will display form.
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 >
<h2>Codeigniter Ajax Validation</h2>
<div style="display:none">
</div>
<form>
<div >
<label>First Name:</label>
<input type="text" name="first_name" placeholder="First Name">
</div>
<div >
<label>Last Name:</label>
<input type="text" name="last_name" placeholder="Last Name">
</div>
<div >
<strong>Email:</strong>
<input type="text" name="email" placeholder="Email">
</div>
<div >
<strong>Address:</strong>
<textarea name="address" placeholder="Address"></textarea>
</div>
<div >
<button >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 to this full example.
So let’s run bellow command on your root directory for quick run:
php -S localhost:8000
Now you can open bellow URL on your browser:
http://localhost:8000/item
I hope it can help you…
Hope this code and post will helped you for implement Codeigniter Ajax Form Validation Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs