使用codeigniter和jquery ui弹出对话框传递表单验证错误


Passing form validation error using codeigniter and jquery ui pop up dialog box

我只想问一个问题,如何在弹出对话框中通过代码点火器表单验证。现在我创建了一个表单,其中包含类别列表以及编辑和删除按钮。场景是当一个成员点击更新按钮时,它会弹出一个对话框,显示一个添加新类别表单。实际上,我在弹出窗口中加载了我的html表单。我的问题是,如果用户输入了重复的类别名称,则弹出对话框中应显示表单验证。在我的情况下,它将打开一个新页面,显示我的表单和验证错误。如何在弹出jquery中显示表单验证?大家好,谢谢。

这是我的一点代码(im使用Codeigniter)

//homepage.php(显示类别详细信息列表)

   <?php $data_var = array('name'=>'category','id'=>'addForm'); ?>
   <?php echo form_open('category_controller/delete_category',$data_var); ?>
   <input class="classname1"  type="button" value="ADD" name="add_category"/> <!-- button for add -->
       <!-- BLOW IS MY FOREACH FOR DISPLAYING INFO -->
        .
        .
        .  
                           foreach($queryViewEntries as $row){
                                $temp_id = $row['salescatid'];
                                echo "<tr>";
                                    echo "<td width='5%' style='text-align: center'><input type='checkbox' name='category[]' value=".$row['salescatid']." id=check".$row['salescatid']." onclick='check(this)' /></td>";
                                    echo "<td width='10%'>{$row['salescatname']}</td>";
                                    echo "<td>{$row['salescatdesc']}</td>";
                                    ?>
                                        <td width="15%" style="text-align: center;">
                                            <?php
                                                $cat_id = $row['salescatid'];
                                            ?>
                                            <input type="hidden" name="cat_id" value="<?php echo $cat_id; ?>" />
                                            <input type="button" name="edit_item" data-value="<?php echo $cat_id; ?>" value="EDIT" />
                                            <input type="button" name="delete_item" value="DELETE" data-value="<?php echo $cat_id; ?>" />
                                        </td>
                                <?php
                                echo "</tr>";
                            } 
....
<!-- MY DIV -->
<div id="popup" style="display: none;"></div>
<div id="edit" style="display: none"></div>
<div id="delete" style="display: none;"></div>
....
....
<!-- BELOW IS MY JQUERY FUNCTION THAT WILL CALL THE POP UP AND LOAD MY HTML FORM INSIDE IT.
  $(function(){
    /* FOR ADD PAGE */    
    $(".hero-unit input[name=add_category]").on('click',function(){
        $('#popup').load("<?php echo site_url("category_controller/addCategoryItem/"); ?>").dialog({
            title: "Add New Category",
            autoOpen: true,
            width: 450,
            modal:true,
            open: function (event, ui) { window.setTimeout(function () {
                jQuery(document).unbind('mousedown.dialog-overlay').unbind('mouseup.dialog-overlay'); }, 100);
            },
            close: function() {
                $('#popup').dialog("close");
            }
        });
    });

//category_controller.php(我的控制器)

<?php
   class Category_Controller extends CI_Controller{
      public function __construct(){
         parent::__construct();
      }
      public function addCategoryItem(){
         $this->form_validation->set_rules('name','Category Name','required|is_unique[sales_category.salescatname]');
         $this->form_validation->set_rules('description','Description','required');
         if($this->form_validation->run() == FALSE){
             $data['title'] = "Add Item";
             $data['copyright'] = date('Y');
             $this->load->view('User/header/header_user',$data);
             $this->load->view('Item/contents/addNewItem');
         }else{
             $this->category_model->addCategory();
             $this->load->view('Item/contents/duccessAdd');   
         }
      }
   }

//controller_model.php(我的模型函数)

 public function addCategory(){
        $cname = ucwords($this->input->post('name'));
        $cdesc = $this->input->post('description');
        $insertCategory = array(
            'salescatid' => NULL,
            'salescatname' => $cname,
            'salescatdesc' => $cdesc,
        );
        $result = $this->db->insert('sales_category',$insertCategory);
        if($result){
            return TRUE;
        }else{
            return FALSE;
        }
    }

//addNewItem.php(我添加新类别的表单)

 <?php $attr = array('class'=>'form-signin','id'=>'addForm'); ?>
  <?php echo form_open('category_controller/insertItem',$attr); ?>
    <h2 class="form-signin-heading"></h2>
        <h5 style="font-weight: normal;">Category Name:</h5>
        <input type="text" class="input-block-level" placeholder="Category Name" required="required" name="name" autofocus="autofocus" value="<?php echo set_value('name'); ?>"/>
            <label style="color: red;"><?php echo form_error('name'); ?></label>
        <h5 style="font-weight: normal;">Desciption</h5>
        <input type="text" class="input-block-level" placeholder="Description" required="required" name="description" value="<?php echo set_value('description'); ?>" />
            <label style="color: red;"><?php echo form_error('description'); ?></label>
        <br />
        <div align="right">
            <input type="submit" value="OK" class="btn btn-large btn-primary" />
            <input type="button" value="CANCEL" class="btn btn-large btn-primary" name='cancel' />
        </div>
  <?php echo form_close(); ?>

这是我的代码示例,希望你们能帮助我。谢谢

您有两个选择,都需要使用javascript。第一种是直接用javascript执行表单验证,您不需要进行任何需要来自服务器/数据库的信息的复杂表单检查。或者,您可以使用ajax提交表单并读取请求,以显示错误或向用户提供成功消息。

由于看起来您正在检查数据库中是否已经存在一个类别,因此

可能需要使用ajax来执行验证。

此代码将阻止表单正常提交,并调用javascript函数。

<?php $attr = array('class'=>'form-signin','id'=>'addForm', 'onsubmit'=>'submitForm(); return false;'); ?>
  <?php echo form_open('category_controller/insertItem',$attr); ?>

然后在你的页面上的某个地方用javascript:

function submitForm() {
    $.ajax({
    url:<?php echo site_url('category_controller/insertItem'); ?>,
    data: {field1:$("#field1").val(), field2:$("#field2").val()}
    }).done(function(data){
        $('#someDiv').innerHTML(data);
    };
    return FALSE;
}

(您需要列出要发送到服务器的每条POST数据,并在data部分中检索其值。)

ajax调用的控制器中的addCategoryItem()函数应该只返回成功消息或验证错误。当请求完成时,该页面输出的任何内容都将被放入id为someDiv的元素中。