Why do I get validation errors through jquery ajax and codeigniter?

php jquery ajax codeigniter

12,807

Solution 1

Try this. It will work fine.

In controller Add these two method

 public function CreateStudents() {

        $this->load->helper('form');

        $data['title'] = "Create Students Page";
        $data['success'] = "";
        $this->load->view('templates/header', $data);
        $this->load->view('createstudents', $data);
        $this->load->view('templates/footer', $data);

    }

    public function CreateStudentsAjax() {

        $this->load->helper('form');
        $this->load->library('form_validation');
        $this->form_validation->set_error_delimiters('', '');

        $this->form_validation->set_rules('roll', 'Roll Number', 'required');
        $this->form_validation->set_rules('name', 'Name', 'required');
        $this->form_validation->set_rules('phone', 'Phone', 'required');

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

            $this->welcome_model->InsertStudents();
            echo json_encode("Oks");
        } else {

            $data = array(
                'roll' => form_error('roll'),
                'name' => form_error('name'),
                'phone' => form_error('phone')
            );

            echo json_encode($data);
        }
    }

In View Add the form and a DIV named "mesage"

<div id="message">


        </div> 

        <?php echo form_open('welcome/CreateStudentsAjax'); ?>

        <label for="roll">Student Roll Number</label>
        <input type="text" id="txtRoll" value="" name="roll"/>

        <label for="Name">Students Name</label>
        <input type="text" id="txtName" value="" name="name"/>

        <label for="Phone">Phone Number</label>
        <input type="text" id="txtPhone" value="" name="phone"/>

        <input type="submit" name="submit" value="Insert New Students"  />

        <?php echo '</form>'; ?>

Now the scripts contains

<script type="text/javascript">

            $(document).ready(function(){

                $('form').submit(function(){
                    //alert('ok');      
                    $.ajax({
                        url:this.action,
                        type:this.method,
                        data:$(this).serialize(),
                        success:function(data){
                            var obj = $.parseJSON(data);

                            if(obj['roll']!=null)
                            {                               
                                $('#message').text("");
                                $('#message').html(obj['roll']);
                                $('#message').append(obj['name']);
                                $('#message').append(obj['phone']);
                            }
                            else
                            {                               
                                $('#message').text("");
                                $('#message').html(obj); 
                            }

                        },
                        erro:function(){
                            alert("Please Try Again");
                        }                        
                    });
                    return false;
                });                        
            });

        </script>

Solution 2

Its:

echo json_encode(validation_errors());

OR - Individually

$arr = array(
    'field_name_one' => form_error('field_name_one'),
    'field_name_two' => form_error('field_name_two')
);

echo json_encode($arr);

12,807

Author by

tastebuds

slacker

Updated on July 03, 2022

Comments

tastebuds almost 2 years

Why my ajax request does get an string of FALSE (it should get the error messages from controller)?

Here is the snippet of controller

    function ajax_verify(){
    $this->form_validation->set_rules('username', '', 'max_length[25]|min_length[4]|trim|required|xss_clean');
    $this->form_validation->set_rules('email', '', 'valid_email|required|trim|xss_clean');  
    
    if($this->form_validation->run()==FALSE){
             $errors = $this->form_validation->error_array();
             echo json_encode($this->form_validation->error_array());
    }else{
            echo "Success!";
       }
    
    }

I Extended the Library to get the error Messages (It works perfectly fine in php validation)

class MY_Form_validation extends CI_Form_validation{

   
function __construct(){
    parent::__construct();
}

function error_array(){
    if(count($this->_error_array)===0){
        return FALSE;
    }else{
        return $this->_error_array;
    }
}

function get_tae(){
    return "TAE!";
 }
}

and last the view and the jquery ajax code (Returning false instead of the errors).

     <!DOCTYPE HTML>
     <html>
     <head>
          <meta charset="utf-8">
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
         <title>Title</title>
     <body>

    <?php //echo validation_errors('<div class="error">', '</div>');?>
    <?php echo form_open('ajax/ajax_verify', array('id'=>'my_form'));?>
    <?php echo form_label('Username'); ?>
    <?php echo form_input('username', '', array('id' => 'username'));?>
    <?php echo form_label('Email Address'); ?>
    <?php echo form_input('email', '', array('id' => 'email')); ?>
    <?php echo form_submit('submit', 'Submit'); ?>
    <?php echo form_close();?>

    <script type="text/javascript">
     $(function(){
          $('#my_form').submit(function(e){
                $.get('ajax_verify', function(data){
                    $('#contents').append(data);
                }, 'json') ;                   
                e.preventDefault();
            })
            
    
      });
           </script>