0

我想创建一个注册表单，我想在其中使用 jquery 以及 CI 验证库。我怎样才能做到这一点？提交表单后，我希望控件使用 jquery 转到验证库并返回响应。然后，如果一切顺利，我希望“表单已提交”消息显示在该页面本身上。

编辑：

这是我的代码。

看法

<?php $this->load->view('template/header'); ?>
<div id="add_form">
    <h2>Add New Category</h2>

    <?php echo form_open('abc/abc_category_controller/add_new_category'); ?>

    <?php

    $category_data = array(
        'name' => 'category_name',
        'id' => 'category_name',
        'value' => set_value('category_name'),
        'maxlength'   => '15'
    );

    $unit_data = array(
        'name' => 'unit',
        'id' => 'unit',
        'value' => set_value('unit'),
        'maxlength'   => '10'
    );

    ?>

    <p><label for="name">Name: </label><?php echo form_input($category_data); ?></p>

    <p><label for="unit">Unit: </label><?php echo form_input($unit_data); ?></p>

    <p><?php echo form_submit('submit', 'Submit','id="submit"'); ?></p>

    <?php echo form_close(); ?>

    <?php echo validation_errors('<p class="error">'); ?>

</div><!--end add new category-form-->

<div id="success_msg">


</div>



<?php $this->load->view('template/footer') ?>

控制器 - add_new_category

<?php

    class Stocks_category_controller extends CI_Controller{

    function add_new_category()
    {
        //$this->load->helper('form');
        $this->load->library('form_validation');

        $data['title'] = 'Add a new category';

        $this->form_validation->set_rules('category_name', 'Category Name', 'required');
        $this->form_validation->set_rules('unit', 'Unit', 'required');

        if ($this->form_validation->run() === FALSE)
        {
              $this->load->view('abc/add_new_category');


        }

        else
        {
            $category_name = $this->input->post('category_name');

            $unit = $this->input->post('unit');

            $this->load->model('abc/abc_category_model');

            $insert_id=$this->abc_category_model->add_new_category($category_name
                                ,$unit);


            if($insert_id!=NULL)
            {
              $this->load->view('template/success',$data);
            }

            else{
                $data['error_msg']='Error Occurred';
                $this->load->view('template/template',$data);
            }

        }

    }

    function success(){
        $data['success_msg']='New Category Successfully Created';
        $this->load->view('template/success',$data);
    }
  }

最后是模型。

   function add_new_category($category_name,$unit){

      $data = array(
           'abc_category_name' => $category_name ,
           'unit' => $unit
        );

        $this->db->insert('abc_category', $data); 
        $insert_id=$this->db->insert_id();

        return $insert_id;
   }

}

我想要的是，当我提交表单时，应该进行 jquery 验证。如果一切顺利，则仅使用 ajax 显示 SUccessful 消息，并且页面不应重新加载。另外，请告诉我是否可以同时使用 jquery 验证和 CI 验证库并维护 ajax？

4

2 回答 2

5

要实现客户端和服务器端验证，您需要使用 jquery 验证插件。

因此，您需要包括：

  1. jQuery javascript 库

  2. jQuery验证插件

加载javascript

<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jquery.validate.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jquery.validate-rules.js"></script>

然后设置您的表格：

$attr = array('id' => 'demo_form');
echo form_open('demo/validation_example', $attributes);

并验证您的表单，例如：

$(document).ready(function() {
  $("#demo_form").validate({
    rules: {
            name: {
                required: true
            },
            ...
    },
    messages: {
             name: {
                required: "Name required",
            },
    },
    errorElement: "span",
        errorPlacement: function(error, element) {
                error.appendTo(element.parent());
        }

  });
});

并且也使用服务器端验证，因为仅使用客户端验证不是一个好习惯。

如需更多帮助，您可以找到关于

如何使用codeigniter实现jquery验证

和工作演示

您可以在哪里检查 jquery 验证，并通过禁用浏览器的 javascript，您可以检查使用 php 完成的 codeigniter 服务器端验证。

于 2012-06-16T07:00:23.633 回答
1

我认为你必须为此使用 jquery ajax。

首先，您需要发布您的数据。将您的提交按钮设置为像这样触发 jquery ajax。

 $.ajax({
        type: "GET",
        url: "/controller/validate",  //your controller action handler
        dataType: "json",
        data: {name:value, name: value}, //set your post data here
        cache:false,
        success: function(data){
             //handle the callback response 
             if(data.success)
                alert("Success");
             else
                alert(data.errors);
       }
 });

接下来在您的控制器操作中，使用 codeigniter 验证器验证您的发布数据。如果验证失败，您需要在视图中使用 json_encode 将错误发送回您的 js 回调函数。像这样设置数据错误，在你的视图中（你将为/controller/validate设置的视图），做这样的事情

$data['errors'] = validation_errors();
echo json_encode($data);

您将在不刷新页面的情况下将错误返回给您。当验证成功时，只需设置一个$data['success']并使用echo json_encodeusing if 语句，以便仅检索成功数据。我已经设置了 ajax 脚本回调。

于 2012-06-16T15:15:34.287 回答