0

jqueryajaxを使用したフォーム検証チュートリアルをたくさん見てきました。私は、すべてが成功したフォーム検証のみを伝えているという同じことを見つけました。サーバー側の検証が失敗した場合にエラーを表示する方法を見つける必要があります。つまり、ajaxを使用せずにフォームを送信すると、フォームにエラーメッセージが再入力され、ユーザーが入力を入力します。このメソッドでは、form_prepのようないくつかの優れたphp関数を使用します。これがビューコードです。

<?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でそれを使用する方法です。

最初にdivでフォームを読み込んでいます

$('#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;
    }
}
4

1 に答える 1

2

私がすることは、代わりにここでコントローラーでフォームをレンダリングすることです

echo 0;

just do

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

そしてajax関数で置換

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

と

else 
{
    $('#userform').html(data);
}
于 2012-06-05T07:55:24.040 に答える