在codeigniter中使用ajax验证失败后,使用jquery.load填充表单

问题描述:

我已经看到了很多使用jquery ajax的表单验证教程。我发现同样的事情,所有只是告诉只有成功的表单验证。我需要找到如果服务器端验证失败时如何显示错误。换句话说,当我们提交一个没有ajax的窗体时,窗体会重新填充错误消息并且填充用户提供的输入。在这个方法中,我们使用一些伟大的php函数,如form_prep。

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(); ?>

您可以在这里看到使用form_prep($ this-> input-> post('username'))这有助于安全问题。但是当我使用相同的形式重新填充ajax失败的验证时,它不显示错误或输入框填充。而是加载表单,就像这是第一次加载。
这是我如何使用它与ajax。

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.

首先在div中我加载表单

First in a div i am loading form

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

现在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;
    });
});

最后我的控制器

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


what我会做的是渲染在控制器中的形式
而不是

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;


在ajax函数中
replace

and in the ajax function replace

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

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