EllisLab text mark
Advanced Search
     
Submitting form using ajax and validation
Posted: 06 November 2008 05:18 AM   [ Ignore ]
Joined: 2008-10-19
43 posts

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.

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

<
div class="pos_button">
    <
input type="submit" name="submit" value="Opslaan" />
 </
div>    

</
form>    
<?php endforeach; ?> 

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

Here’s my 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 
'<input type="button" value="Doorgaan">';
        echo 
'</div>';
        echo 
'</div>';
        echo 
'</div>';
        
    
}
    
    }
    
}

?> 


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

$(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:

$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

 
Posted: 06 November 2008 07:40 AM   [ Ignore ]   [ # 1 ]   [ Rating: 0 ]
Avatar
Joined: 2007-03-31
242 posts

Do you use Firebug? It should tell you the problem..you can also look at what was posted and what’s the response.