CodeIgniter 在带有 ajax 回调的表单字段旁边单独显示错误

Posted 2023-05-08

【中文标题】CodeIgniter 在带有 ajax 回调的表单字段旁边单独显示错误

【英文标题】：CodeIgniter show errors individually next to form field with ajax callback

【发布时间】：2012-12-08 14:04:14

【问题描述】：

我使用 CI 制作了一个表单，并有一个本地 form_validation() 库来验证每个字段输入，我使用 jQuery post 回调输入以检查每个字段是否有效，如果我希望每个错误填充到form_error() 在每个字段旁边而不是 validation_errors()?

请参考以下内容：

查看：

<script>
$("#btnregister").click(function() 
    var parameters = $("#reg_form").serialize();

    $.post(baseurl+'pages/registration', parameters, function(data) 
        if(data == "ok") 
            //show success message
        else

            $("#error").html(data); 

        
    , "html");
);
</script>


<div id="error"></div>
<form id="reg_form" method="post">
     <p>
     <label for="reg_username">Username</label><br />
     <input type="text" id="reg_username" name="reg_username" value="<?php echo set_value('reg_username'); ?>">
     <?php echo form_error('reg_username'); ?>
     </p>

     <p>
     <label for="reg_email">Email</label><br />
     <input type="text" id="reg_email" name="reg_email" value="<?php echo set_value('reg_email'); ?>">
     <?php echo form_error('reg_email'); ?>
     </p>

     <p><input type="button" id="btnregister" value="Register"></p>
</form>
</div>

控制器：

public function registration()
    $this->load->library('form_validation');

    $this->form_validation->set_rules('reg_username', 'Username', 'trim|required|min_length[4]|max_length[15]|xss_clean|is_unique[users.username]');
    $this->form_validation->set_rules('reg_email', 'Email', 'trim|required|valid_email|is_unique[users.email]');


    if($this->form_validation->run() == FALSE)
        echo validation_errors();

    else
        // insert to db
        echo "ok";
    

感谢您的帮助。

【参考方案1】：

您必须构建自己的错误数组。如果我们能访问就好了 Form_validation 的$_error_array 但不幸的是它是protected 并且没有它的访问方法。

我将更改您的控制器以输出 json 响应以使其更容易：

public function registration()

    $this->load->library('form_validation');
    $this->form_validation->set_rules('reg_username', 'Username', 'trim|required|min_length[4]|max_length[15]|xss_clean|is_unique[users.username]');
    $this->form_validation->set_rules('reg_email', 'Email', 'trim|required|valid_email|is_unique[users.email]');
    if ($this->form_validation->run())
    
       $response['status'] = TRUE;
    
    else
    
        $errors = array();
        // Loop through $_POST and get the keys
        foreach ($this->input->post() as $key => $value)
        
            // Add the error message for this field
            $errors[$key] = form_error($key);
        
        $response['errors'] = array_filter($errors); // Some might be empty
        $response['status'] = FALSE;
    
    // You can use the Output class here too
    header('Content-type: application/json');
    exit(json_encode($response));

现在您的 ajax 成功回调可以读取响应的 status 和 errors 键。您可以遍历data.errors 并将每一项添加到输入字段中：

$("#reg_form").submit(function() 
    var form = $(this);
    $.post(baseurl+'pages/registration', form.serialize(), function(data) 
        if (data.status == true) 
            //show success message
        else
            $.each(data.errors, function(key, val) 
                $('[name="'+ key +'"]', form).after(val);
            );​
        
    , "json");
);

另一种简单的方法是将表单发布到自身，并让您的 ajax 响应重新加载整个表单 - 这样消息和验证过滤器将在服务器端处理。

【讨论】：

这对我来说太棒了..非常感谢@Wesley Murch Sir.. :)