codeigniter 中的 Ajax 表单验证

Posted 2023-02-22

【中文标题】codeigniter 中的 Ajax 表单验证

【英文标题】：Ajax form validation in codeigniter

【发布时间】：2011-07-28 15:16:29

【问题描述】：

大家好，

我最近一直在研究 ajax，但在将它与 codeigniter 表单验证库一起使用时遇到了问题。我使用了该工具在函数http://formtorch.geekhut.org/ 中生成的示例。 现在，当我将json_encode() 函数与虚拟数据一起使用时，ajax 可以完美运行并正确返回数据，但示例中的验证使用validation 库而不是form_validation 库，这似乎是旧版本。

为此，在该示例中，验证不适用于 ajax，特别是 $this->form_validation->run() 函数使 ajax 不返回任何结果，即使我在 create_course() 开头使用 json_encode() 回显虚拟数据。

那么使用 ajax 进行验证有什么问题，请解释一下控制器如何接收 ajax 发送的数据。

这是我的代码：

    function create_course()
   
        $this->form_validation->set_rules('course_code', 'course_code', 'trim|xss_clean|required');
        $this->form_validation->set_rules('name', 'name', 'xss_clean|required');
        // .. etc           
        if ($this->form_validation->run())             
            // validation ok
            $data['course_code'] = $this->form_validation->set_value('course_code');
            $data['name'] = $this->form_validation->set_value('name');
            // ... etc
            if ($this->models_facade->create_course($user_id,$data))       // success
                    $data = array( 'profile_change' => $this->lang->line('profile_change'));
             else                     // fail 
                    $data = array( 'profile_change_error' => $this->lang->line('profile_change_error'));
            
        
        else
        
            $data = array(
                    'course_code' => $this->form_validation->course_code_error, 
                    'name' => $this->form_validation->name_error
            );
                
        echo json_encode($data);
    

这是 Jquery Ajax 函数

   $(function()
   $("#submit").click(function()
        var course_code = $("#course_code").val(); 
        var name = $("#name").val(); 
        // etc          
        $.post("<?php echo base_url() ?>home/create_course",  course_code:course_code, name:name,
    function(data)
        function(data)
            alert(data.data);
            $("#course_code_error").html(data.course_code);
            $("#name_error").html(data.name);
        ,'json');
   );
   return false;

);

【参考方案1】：

您可以使用表单助手方法“form_error()”来调用错误消息，而不是通过“this->form_validation->xxxx_error”打印出来。

所以你可以做类似的事情..

$data = array(
                    'course_code' => form_error('course_code'), 
                    'name' => form_error('name')
            );

【参考方案2】：

您还可以考虑为 JSON 数据设置输出内容类型标头。

$this->output->set_content_type('application/json');
echo json_encode($data);

【讨论】：

这是一个很好的提示。设置内容类型对于确定如何处理信息很重要。

【参考方案3】：

您使用的是哪个版本的 Codeigniter？您还记得在您的构造中加载验证库吗？

$this->load->library('form_validation');

【讨论】：

'json' 问题应该是 "json"

它总是小东西​​:)

【参考方案4】：

如果您正在发出 ajax 请求，您可以使用 validation_errors()。 当验证运行时，它将填充错误消息数组。

这里是一个例子：

// Set your rules
$this->form_validation->set_rules('course_code', 'course_code', 'trim|xss_clean|required');
$this->form_validation->set_rules('name', 'name', 'xss_clean|required');

if ($this->form_validation->run())   
  //happy happy time

else  
  //well now i'm sad...

  //Important to turn that off if it's on
  $this->output->enable_profiler(false); 

  $this->output->set_status_header('500');
  $this->output->set_content_type('application/json');

  echo json_encode(array(
      'error_msg' => validation_errors(),
  ));
 

然后在您的客户端，您可以使用这样的响应：

error:function(data) 
    $("your-error-input-selector").html('').append(data.responseJSON.msg);

希望我能帮上忙，即使我迟到了 2 年。

P.S 对不起，我的英语不好。

【参考方案5】：

****//view-path [application/views/myviews/myview2.php]****

   <script src="<?php echo base_url('/jquery-1.9.1.min.js');?>"></script>
<script>
$(document).ready(function() 

    $("#frm").on('submit',(function(e) 
        e.preventDefault();
        $.ajax(
            url: $('#frm').attr('action'),
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data)
                    console.log(data);
                    data = JSON.parse(data);
                    if(data.st == 0)
                    
                        $( ".error-message" ).remove();
                        var data1    = JSON.parse(data.msg); 
                        $('form :input').each(function()                            
                                        var elementName = $(this).attr('name');        
                                        var message = data1[elementName];
                                        if(message)
                                        var element = $('<div>' + message + '</div>')
                                                        .attr(
                                                            'class' : 'error-message'
                                                        )
                                                        .css (
                                                            display: 'none'
                                                        );
                                        $(this).before(element);
                                        $(element).fadeIn();
                                        
                        );
                    

                    if(data.st == 1)
                    
                      $('#validation-error').html(data.msg);
                      $( ".error-message" ).remove();
                    
            ,
            error: function()             
        );
    ));

);
</script>
<style>
.error-messagecolor:red;
</style>
<?php echo form_open_multipart('ajaxcontroller/index', array('id'=>'frm')); ?>

<div id="validation-error"></div>

<h5>Username</h5>
<input type="text" name="username" value="<?php echo set_value('username'); ?>" size="50" />

<h5>Password</h5>
<input type="text" name="password" value="<?php echo set_value('password'); ?>" size="50" />

<h5>Password Confirm</h5>
<input type="text" name="passconf" value="<?php echo set_value('passconf'); ?>" size="50" />

<h5>Email Address</h5>
<input type="text" name="email" value="<?php echo set_value('email'); ?>" size="50" />

<h5>Profile Pic</h5>
<input type="file" name="image[]" value="" multiple=""/>

<div><input type="submit" value="Submit" /></div>

</form>

**//controller--[application/controllers/ajaxcontroller.php]****

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Ajaxcontroller extends CI_Controller 

    function __construct()
    
        parent::__construct();

    

    function index()
    
        if($_POST)
                
            $this->load->library('form_validation');
            $this->form_validation->set_rules('username', 'Username', 'required|min_length[5]|max_length[12]');
            $this->form_validation->set_rules('password', 'Password', 'required|matches[passconf]');
            $this->form_validation->set_rules('passconf', 'Password Confirmation', 'required');
            $this->form_validation->set_rules('email', 'Email', 'required|valid_email');

            if (empty($_FILES['image']['name'][0])) 
                $this->form_validation->set_rules('image[]', 'File', 'required'); 
            

            if ($this->form_validation->run() == FALSE)
            
                $errors = $this->form_validation->error_array(); //function in library : My_Form_validation            
                echo json_encode(array('st'=>0, 'msg' => json_encode($errors)));
            
            else
            

                $username = $this->input->post('username');
                $password = $this->input->post('password');
                $email = $this->input->post('email');

                if(is_array($_FILES)) 
                    foreach ($_FILES['image']['name'] as $name => $value)
                        if(is_uploaded_file($_FILES['image']['tmp_name'][$name])) 
                            $sourcePath = $_FILES['image']['tmp_name'][$name];
                            $targetPath = "images/".$_FILES['image']['name'][$name];
                            if(move_uploaded_file($sourcePath,$targetPath)) 

                            
                        
                    
                

                echo json_encode(array('st'=>1, 'msg' => 'Successfully Submiited'));
            
        
        else
        
            $this->load->view('myviews/myview2');
            
    



**//library file -- path will be [application/libraries/MY_Form_validation.php]**
<?php
/**
 * 
 * Enter description here ...
 * @return CI_Controller
 */
class MY_Form_validation extends CI_Form_validation

    public function error_array()
    
        return $this->_error_array;
    

【讨论】：

在线使用 jquery url 或首先存储在您的客户端计算机上。

感谢您的回答！请在代码中附上解释以提供最佳答案。