jQuery Ajax form validation in Codeigniter

This tutorial is part 2 of User Registration with Codeigniter. In the previous tutorial, we do the form validation in the sever side. In this tutorial, we will do the form validation by using the ajax technology. So user can know whether his/her form valid or not before submitting.

Requirement

CodeIgniter
jQuery

Our last screen shot

Create a folder named js in your root directory and then download the jQuery file below your js folder. Rename it as jquery.js. And then link this file in our header_view.php like following.

<script type="text/javascript" src="<?php echo base_url();?>js/jquery.js"></script>

Editing registration_view file for ajax validation

Firstly I add the span class to the user_name input field to show our yes or no picture like following.

<p>
 <label for="user_name">User Name:</label>
<input type="text" id="user_name" name="user_name" value="<?php echo set_value('user_name'); ?>" /><span id="usr_verify" class="verify"></span>
</p>

And then add the following script to our registration_view.php.

<script type="text/javascript">
$(document).ready(function(){
 $("#user_name").keyup(function(){
  if($("#user_name").val().length >= 4)
  {
  $.ajax({
   type: "POST",
   url: "<?php echo base_url();?>index.php/user/check_user",
   data: "name="+$("#user_name").val(),
   success: function(msg){
    if(msg=="true")
    {
     $("#usr_verify").css({ "background-image": "url('<?php echo base_url();?>images/yes.png')" });
    }
    else
    {
     $("#usr_verify").css({ "background-image": "url('<?php echo base_url();?>images/no.png')" });
    }
   }
  });
  }
  else 
  {
   $("#usr_verify").css({ "background-image": "none" });
  }
 });
});
</script>

We use the jQuery keyup function to test whether the user already exit or not. Before we use the jQuey ajax, we need to test whether the user_name field val().length is greater than or equal 4. If the length is greater than or equal 4, we use the jQuery ajax function. In the url I give the function check_user. So in our controller, we must add that controller. Following is our check_user function. Add that function to our user controller.

public function check_user()
{
 $usr=$this->input->post('name');
 $result=$this->user_model->check_user_exist($usr);
 if($result)
 {
  echo "false";
  }
 else{
  echo "true";
  }
}

In the check_user() function, we set the $usr variable from our ajax data parameter. And then we call the model function check_user_exist. This function will return true if the user name already exits. It will return false if the user name does not exist. How do we echo for our ajax success function? So I echo the false if the user name already exits and true if the user name does not exit. We get this echoed data as a msg in the ajax success function. So we add the css background image as the yes.png if the msg is equal to true. Else we will add no.png.

Now we need to create the check_user_exist() model function. Add following function to our user_model model.

public function check_user_exist($usr)
{
 $this->db->where("username",$usr);
 $query=$this->db->get("user");
 if($query->num_rows()>0)
 {
  return true;
 }
 else
 {
  return false;
 }
}

The last thing we need to do is to add css class .verify for our image.

.verify
{
    margin-top: 4px;
    margin-left: 9px;
    position: absolute;
    width: 16px;
    height: 16px;
}

In my source code, I also add password and email validation. Download the source code and you can learn more.
Download Source Code