Question

I have seen a lot of form validation tutorials with jquery ajax. I found same thing that all are only telling only sucessfull form validation. I need to find how can i display errors if the server side validation fails. in other words, when we submit a form without ajax the form is re-populated with error messages And the inputs filled user provided. In this method we use some great php functions like form_prep. Here is view code.

<?php // Change the css classes to suit your needs    
$attributes = array('class' => '', 'id' => 'login');
echo form_open(SITE_URL.'user/insertUser', $attributes); 
?>

<p>
<label for="username">User Name <span class="required">*</span></label>
<input type="text" name="username" maxlength="255" value="<?php echo form_prep($this->input->post('username'));?>"  />
<span id="username"><?php echo form_error('username'); ?></span><br />
</p>
<p>
<label for="first_name">First Name <span class="required">*</span></label>
<input type="text" name="first_name" maxlength="255" value="<?php echo form_prep($this->input->post('first_name'));?>"  />
<span id="first_name"><?php echo form_error('first_name'); ?></span><br />
</p>

<p>
<label for="last_name">Last Name <span class="required">*</span></label>
<input type="text" name="last_name" maxlength="255" value="<?php echo form_prep($this->input->post('last_name')); ?>"  />
<span id="last_name"><?php echo form_error('last_name'); ?></span><br />
</p>

<p>
<label for="password">Password <span class="required">*</span></label>
<input type="text" name="password" maxlength="255" value="<?php echo form_prep($this->input->post('password')); ?>"  />
<span id = "password"><?php echo form_error('password'); ?></span><br />
</p>

<p>
<label for="email">Email <span class="required">*</span></label>
<input type="text" name="email" maxlength="255" value="<?php echo form_prep($this->input->post('email')); ?>"  />
<span id = "email"><?php echo form_error('email'); ?></span><br />
</p>


<p>
<?php echo form_submit( 'submit', 'Submit', 'id="submit"'); ?>
</p>

<?php echo form_close(); ?>

You can see here used form_prep($this->input->post(‘username’)) which is helpful for security issue. But when i use the same form to re-populate with ajax on failed validation it does not display the errors nor the input boxes filled. Instead loads the form as if this is the first time this is loaded.
Here is how i using it with ajax.

First in a div i am loading form

$('#userform').load('<?php $this->load->view('user_form')?>');

Now ajax

$(function()
{
    $('#login').submit(function()
    {
        $.ajax(
        {
            type : 'POST',
            data : $(this).serialize(),
            url  : $(this).attr('action'),
            success : function(data)
            {
                if(data == 1)
                {
                    // do something 
                }
                else
                {
                    $('#userform').load('<?php $this->load->view('user_form')?>');
                }
            }
        });
        return false;
    });
});

And finally my controller

function insertUser()
{
    if($this->form_validation->run() == FALSE)
    {
        echo 0;
    }else{
        echo 1;
    }
}

Answer 1

what I would do is render the form in the controller here
instead of

echo 0;

just do

$html =   $this->load->view('user_form',true);
echo $html;

and
in the ajax function
replace

else
{
    $('#userform').load('<?php $this->load->view('user_form')?>');
}

with

else 
{
    $('#userform').html(data);
}