Question

hellp guys，

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

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

那么使用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;

}）;

Answer 1

您可以使用Form Helper方法“form_error（）”来调用错误消息，而不是通过“this-＆gt; form_validation-＆gt; xxxx_error”打印出来。

所以你可以做点什么......

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

Answer 2

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

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

Answer 3

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

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

Answer 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抱歉我的英语不好。

Answer 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-message{color: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;
    }
}

在codeigniter中进行Ajax表单验证

5 个答案: