Ajax form validation in codeigniter

Question

hellp guys,

I've been working on ajax recently, and I have a problem in using it with codeigniter form validation library. I used the example that tool generate in the function http://formtorch.geekhut.org/. Now, ajax works perfectly and return data correctly when I use json_encode() function with dummy data, but validation in the example uses validation library instead of form_validation library, which seems to be older version.

For that, validation didn't work with ajax in that example, specifically $this->form_validation->run() function makes ajax return no result even if I echo dummy data using json_encode() in the beginning of create_course().

so what's wrong with validation with ajax, and explain to me how data sent by ajax received by the controller.

so this is my code:

    function create_course()
{   
        $this->form_validation->set_rules('course_code', 'course_code', 'trim|xss_clean|required');
        $this->form_validation->set_rules('name', 'name', 'xss_clean|required');
        // .. etc           
        if ($this->form_validation->run()) {            
            // validation ok
            $data['course_code'] = $this->form_validation->set_value('course_code');
            $data['name'] = $this->form_validation->set_value('name');
            // ... etc
            if ($this->models_facade->create_course($user_id,$data))    {   // success
                    $data = array( 'profile_change' => $this->lang->line('profile_change'));
            } else {                    // fail 
                    $data = array( 'profile_change_error' => $this->lang->line('profile_change_error'));
            }
        }
        else
        {
            $data = array(
                    'course_code' => $this->form_validation->course_code_error, 
                    'name' => $this->form_validation->name_error
            );
        }        
        echo json_encode($data);
    }

and this is the Jquery Ajax function

   $(function(){
   $("#submit").click(function(){
        var course_code = $("#course_code").val(); 
        var name = $("#name").val(); 
        // etc          
        $.post("<?php echo base_url() ?>home/create_course",  course_code:course_code, name:name},
    function(data){
        function(data){
            alert(data.data);
            $("#course_code_error").html(data.course_code);
            $("#name_error").html(data.name);
        },'json');
   });
   return false;

});    

Solution 1

What version of Codeigniter are you using? Did you remember to load the validation library in your construct?

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

Solution 2

Rather than printing out via "this->form_validation->xxxx_error" you can utilize Form Helper method "form_error()" to call the error messages.

So you can do something like..

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

Solution 3

You might also consider setting the output content type header for JSON data.

$this->output->set_content_type('application/json');
echo json_encode($data);

Comments

[Khaled]

'json' was the problem it should be "json"

[tylerpenney]

its always something small :)

[Manatax]

This is a good tip. Setting up the content type is important to determine how information is handled.

[Kuldeep Singh]

use the jquery url either online or stored at your client machine first.

[kittykittybangbang]

Thank you for your answer! Please include an explanation along with the code to provide the best answer.