To pass form validation status to client, use the below code in your controller. The code responds with a json-formatted, error, and notice text.

if ($this->form_validation->run() == FALSE) {
    $json_response['form_errors'] = $this->form_validation->error_array();
    exit(json_encode($json_response));
}

Client side, in your jquery ajax success handler, you can use the below code so the status response emitted server side is displayed to the client.

if (data.form_errors != undefined) {
  var errors = '';
  $.each(data.form_errors, function(i, val) {
    errors = errors + "\n" + val;
  });
  if (errors != "") alert(errors);
} 
else {
  alert('no error(s) in form... submit form..');
}

Alternative to the above js code:

For updating each form elements' status when they change, use the below code. Place it outside your form submit handler.

function update_form_validation() { 
  $("input,select,textarea").on("change paste keyup", function() {
    if ($(this).is(':checkbox') == true) {
      $(this).siblings("label:last").next(".text-danger").remove();
    } else if ($(this).is(':radio') == true) {
      $(this).siblings('input[type="radio"][name="' + $(this).attr('name') + '"]:last').next(".text-danger").remove();
      $(this).next(".text-danger").remove();
    } else {
      $(this).next(".text-danger").remove();
    }
  });
}
update_form_validation();

For displaying general notice and displaying each errors and notices right after their respective form element,
use the below code. In your form submit handler, place the code inside your ajax success function.

if (data.form_errors != undefined) {
  $.each(data.form_errors, function(i, val) {
    if ($('input[name="' + i + '"]').is(':hidden') == false) {
      if ($('input[name="' + i + '"]').is(':radio') == true) {
        $('input[name="' + i + '"]:last').after('<div class="text-danger">' + val + '</div>');

      } else if ($('input[name="' + i + '"]').is(':checkbox') == true) {
        $('input[name="' + i + '"]').siblings("label:last").after('<div class="text-danger">' + val + '</div>');
      } else {
        $('input[name="' + i + '"]').after('<div class="text-danger">' + val + '</div>');
        $('select[name="' + i + '"]').after('<div class="text-danger">' + val + '</div>');
        $('textarea[name="' + i + '"]').after('<div class="text-danger">' + val + '</div>');
      }
    }
  });
} else {
  alert('no errors in form... submit form..');
}

You can use CodeIgniter form validations function :



 $errors = array();
if ($this->form_validation->run() == FALSE) {
   $errors['validation_error'] = validation_errors();
   echo json_encode($errors);
   exit();
}

Now in jquery:



 $(document).on('click', '#update', function() {
        console.log($(this).attr('data-registerid'));
        $.ajax({
            url: "<?php echo base_url('home/get_data')?>",
            type: "POST",
            dataType: "JSON",
            data: {
                "id": $(this).attr('data-registerid')
            },
            success: function(data) {
                var myObj = JSON.parse(data);
                $('#error_div').html(myObj.validation_error);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('Error get data from ajax');
            }
        });
    });

View

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h5 class="modal-title">Login Form</h5>
      </div>
      <div class="modal-body">

        <div id="modelError"></div>

        <form method="post" action="javascript:void(0)"> 
            <div class="input-group">
                <input type="text" name="name" id="name" placeholder="First Name">
            </div>
              <div class="input-group">
                <input type="text" name="last_name" id="last_name" placeholder="Last Name">
            </div>
            <input type="submit" id="my_form" name="Save">
        </form>
      </div>
    </div>
  </div>
</div>

Script

 <script>
$('#my_form').click(function(){
  $.ajax({
        url: "<?php echo base_url('controller/function')?>",
        type: "POST",
        data: {
            'name': $('#name').val(),
            'last_name': $('#last_name').val(),
        },
        success: function(data) {
            var myObj = JSON.parse(data);           
            var msg = '<div class="alert alert-danger alert-dismissable">'+myObj.error+'</div>';
              $('#modelError').html(msg);
        },
        error: function() {
            alert('Error get data from ajax');
        }
    });       
});
</script>

Controller

public function insert()
{
    if(isset($this->input->post())){
        $this->form_validation->set_rules('name','Name','required');
        $this->form_validation->set_rules('last_name','Last Name','required');
        if ($this->form_validation->run() == FALSE)
        {
            $this->msg['error'] = validation_errors();
            echo json_encode($this->msg);
        }else{

            $this->your_model->insert($this->input->post());
            redirect(base_url());
        }
    }else{
        $this->load->view('view-page');
    }    
}