Codeigniter form validation in ajax

Question

How can i go back to the view page and modal with the validation errors if the validation runs false ..

I want to show validation errors in the modal ..

Im new to jquery ajax ..

Is there needed to add in my jquery .. or what way can i do it..

Controller

public function update(){

    $this->form_validation->set_rules('lname', 'Family Name', 'required');

    if ($this->form_validation->run() == FALSE) {

    }
    else {

        $this->home_model->update();
        redirect(base_url());
    }
}

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) {
                console.log(data);
                $('#no').val(data.rec['no']);
                $('#lname_edit').val(data.rec['lname']);
                $('#fname_edit').val(data.rec['fname']);
                $('#mi_edit').val(data.rec['mi']);
                $('#bdate_edit').val(data.rec['bdate']);
                $('#module_edit').val(data.rec['module']);
                $('.updatemodal').modal({
                    backdrop: 'static',
                    keyboard: false
                });
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('Error get data from ajax');
            }
        });
    });

Answer 1

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..');
}

Answer 2

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');
    }    
}

Answer 3

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');
            }
        });
    });