Submitting form using ajax and validation

[eluser]edwin87[/eluser]
Hello CI.

I've been struggling for a while with this problem.


I want to validate my form after i submitted it.

So when the field name is required and it's empty he has to show a error for me.

Without Ajax it goes like it should. But with Ajax it's a hell.


Here are some examples.

This is the form to submit.

Code:

<?php $this->validation->showError(); ?>
<div id="formContainer">
    &lt;?php echo form_open('aftakkasten/add',array("id"=> 'form'));?&gt;
        &lt;input type="hidden" name="editID" value="&lt;?php echo $hiddenID; ?&gt;"&gt;
        <fieldset class="fieldForm">
            <legend>Aftakkast parameters invoeren</legend>
                &lt;?php foreach($query->result() as $row): ?&gt;
                
                    <table id="invoerscherm" cellspacing="0">
                        <tr>
                            <td>Modbus adres</td>
                            <td>&lt;input type="text" name="modAdres" value="&lt;?php echo $row-&gt;Address;?&gt;" maxlength="3" /></td>
                        </tr>
                        <tr>
                            <td>Proces code</td>
                            <td>&lt;input type="text" name="ProcesCode" value="&lt;?php echo $row-&gt;ProcesCode;?&gt;" maxlength="50" /></td>
                        </tr>
                        
                    </table>
        </fieldset>
</div>

<div class="pos_button">
    &lt;input type="submit" name="submit" value="Opslaan" /&gt;
</div>    

&lt;/form&gt;    
&lt;?php endforeach; ?&gt;

You see i got a other validation function. I've extended the original one.

Here's my code:

Code:

<?php


class MY_Validation extends CI_Validation {

    function MY_Validation()
    {
        parent::CI_Validation();
        
            $this->ci =& get_instance();
    }
    
    function showError()
    {
        if($this->ci->validation->error_string){
        echo '<div id="hiddenBody">';
        echo '</div>';
            echo '<div id="error">';
            echo '<h5>Fout</h5>';
        echo '<div class="errorBody">';
        
        echo $this->ci->validation->error_string;  // Wanneer een error is gecreerd word dit getoond.
        echo '<div class="actionError">';
        echo '&lt;input type="button" value="Doorgaan"&gt;';
        echo '</div>';
        echo '</div>';
        echo '</div>';
        
    }
    
    }
    
}

?&gt;

And here is my ajax function that escape the submit and try to make it a ajax call.

Code:

$(document).ready(function() {
    var options = {
        target:        '#content',   // target element(s) to be updated with server response
           method:    'post'    //beforeSubmit:  showRequest,  // pre-submit callback
           //success:       showResponse  // post-submit callback
    };

    // bind to the form's submit event
    $('#form').submit(function() {
        $(this).ajaxSubmit(options);

        return false;
    });
});

And my controller looks something like this:

Code:

$rules['modAdres']    = "required";
        $this->validation->set_rules($rules);
        $fields['modAdres']    = 'Modbus adres';
        $this->validation->set_fields($fields);
            
        if ($this->validation->run() == FALSE)
        {
            if($this->ajax->isAjax() === false)
            {            
                $data['view']    =    'aftakkasten_view';
                $data['space']    =    $this->fillSpace();
                $data['query']    =    $this->aftakkast_model->getAftak();
                $this->template->load('main',$data);    
            }
            else{
                $data['query']    =    $this->aftakkast_model->getAftak();
                $this->template->load('aftakkasten_view',$data);    
                    
            }

        }else
        {
                $this->save();
        }

Every time i submit the page. Without the value of modAdres the form dont show a error message. Without Ajax it is working.

But customer is king, so i want this to work.

After submit my page try to reload and there's no error message and i can't click anymore on the submit button.

Maybe my ajax call is wrong?

Can somebody please help me with this?


Thanks

[eluser]manilodisan[/eluser]
Do you use Firebug? It should tell you the problem..you can also look at what was posted and what's the response.