Registration Form Validation using Ajax in Codeigniter

Registration Form Validation using Ajax in Codeigniter

In this Post We Will Explain About is Registration Form Validation using Ajax in Codeigniter With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Codeigniter Ajax Registration Form with Validation Example

In this post we will show you Best way to implement jQuery Ajax form validation in Codeigniter , hear for How To Integrate Codeigniter Form Validation Library and jQuery AJAX
with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Step 1: Create Routes

In first Phase You require to put simple two route for display HTML form and All the data post form. And then open simple Codeigniter routes.php file and put source code like as bellow example:
application/config/routes.php

Also Read :   Session in CodeIgniter with Example

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

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

$route['stud'] = "stud/index";
$route['studentForm'] = "stud/studentForm";

Step 2: Create Item Controller

In this Second Phase, You need to make Item Codeigniter Controller as well as define two some methods, Like as a index() and studentForm() methods, Here You will also some load HTML form_validation and Codeigniter session library. simple path So let’s step by step proceed.
application/controllers/Item.php

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

class Item extends CI_Controller {

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

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

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

   /**
    * Store Data from this method.
    *Student form
    * @return Response
   */
   public function studentForm()
   {
        $this->form_validation->set_rules('student_fname', 'Student First Name', 'required');
        $this->form_validation->set_rules('student_lname', 'Student Last Name', 'required');
        $this->form_validation->set_rules('email', 'Student Email', 'required|valid_email');
        $this->form_validation->set_rules('res_address', 'Student 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 Phase, You need to make HTML view file, Therefor here make stud.php view file as well as copy bellow some source code, here You will data display form.
application/views/stud.php

Also Read :   AngularJS File Upload using Ajax POST Form Web API

<!DOCTYPE html>
<html>
<head>
	<title>Simple Codeigniter Ajax Validation step by step Example</title>
	<!-- Devloped by live24u.com free download examples -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
	<!-- Devloped by live24u.com free download examples -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<!-- Devloped by live24u.com free download examples -->
<div class="container">
	<h2>Step By step Codeigniter Ajax Validation Example</h2>

	<div class="alert alert-danger display-live-err-msg" style="display:none">
    </div>
<!-- Devloped by live24u.com free download examples -->
	<form>
		<div class="form-group">
			<label>Student First Name:</label>
			<input type="text" name="student_fname" class="form-control" placeholder="Student First Name">
		</div>

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

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

		<div class="form-group">
			<strong>Student Address:</strong>
			<textarea class="form-control" name="res_address" placeholder="Student 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 student_fname = $("input[name='student_fname']").val();
	    	var student_lname = $("input[name='student_lname']").val();
	    	var email = $("input[name='email']").val();
	    	var res_address = $("textarea[name='res_address']").val();

	        $.ajax({
	            url: "/studentForm",
	            type:'POST',
	            dataType: "json",
	            data: {student_fname:student_fname, student_lname:student_lname, email:email, res_address:res_address},
	            success: function(data) {
	                if($.isEmptyObject(data.error)){
	                	$(".display-live-err-msg").css('display','none');
	                	alert(data.success);
	                }else{
						$(".display-live-err-msg").css('display','block');
	                	$(".display-live-err-msg").html(data.error);
	                }
	            }
	        });

	    }); 

	});

</script>

</body>
</html>

Good Luck we are all the steps ready to this full source code example.

Also Read :   Creating RESTful API with Slim Framework,PHP/MySQl

php -S localhost:8000
http://localhost:8000/stud

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is registration form validation using jquery in codeigniter And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.