Codeigniter驗證不能使用AJAX

Question

我使用codeigniter表單驗證在我的模式上提交我的表單。但是當出現錯誤時，模型應該能夠添加我的類並顯示錶單驗證消息。我的腳本功能似乎沒有工作正確。我的腳本在我的模式for-each循環中。

問題：當我在自舉模式下提交表單時，如何添加我的has-error類，並且只有在使用codeigniter顯示任何錯誤時才阻止它關閉。

腳本

<script type="text/javascript"> 
$(function() { 
    $("#myModal<?php echo $layout['layout_id'];?>").click(function(){ 
     $.ajax({ 
      type: "POST", 
      url: "<?php echo base_url('admin/design/layout/delete');?>", 
      data: $('form').serialize(), 
      success: function(msg){ 
      }, 
      error: function(){ 
       // Need to add class if any errors 
       $("#name-<?php echo $layout['layout_id'];?>").addClass("has-error"); 
      } 
     }); 
     return false; 
    }); 
}); 
</script> 

查看

<?php echo $header;?> 
<div class="container"> 

<div class="row"> 
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
<div class="page-header"> 
<h1><?php echo $heading_title;?></h1> 
</div> 
</div> 
</div> 

<div class="row"> 
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 

<div class="panel panel-default"> 

<div class="panel-heading"> 
    <div class="clearfix"> 
    <div class="pull-left" style="padding-top: 7.5px;"> 
    <h1 class="panel-title">Layout List</h1> 
    </div> 
    <div class="pull-right"> 
    <a href="<?php echo base_url('admin/design/layout/add');?>" role="button" class="btn btn-success">Add Layout</a> 
    </div> 
    </div> 
</div> 

<div class="panel-body"> 
<div class="table-responsive"> 
<table class="table table-striped table-bordered table-hover"> 
<thead> 
<td>Layout Name</td> 
<td class="text-right">Action</td> 
</tr> 
</thead> 
<tbody> 
<?php if ($layouts) {?> 
<?php foreach ($layouts as $layout) {?> 
<tr> 
    <td><?php echo $layout['name'];?></td> 
    <td class="text-right"> 
    <button type="button" data-toggle="modal" data-target="#myModal<?php echo $layout['layout_id'];?>" class="btn btn-danger">Delete</button> 
    <a href="<?php echo $layout['edit'];?>" role="button" class="btn btn-primary">Edit</a> 
    </td> 
</tr> 
<?php }?> 
<?php } else { ?> 

<?php } ?> 
</tbody> 
</table> 
</div> 

</div> 
<div class="panel-footer"> 
</div> 

</div> 

</div> 
</div> 

</div> 

<?php foreach ($layouts as $layout) {?> 
<?php echo form_open('admin/design/layout/delete/', array('id' => "layout-form" . $layout['layout_id'] . ""));?> 
<!-- Modal --> 
<div class="modal fade" id="myModal<?php echo $layout['layout_id'];?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 

    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel"><?php echo $layout['name'];?></h4> 
    </div> 

    <div class="modal-body"> 
     <div class="form-group" id="name-<?php echo $layout['layout_id'];?>"> 
      <input type="text" name="name" value="" placeholder="Layout Name" class="form-control" /> 
      <br/> 
      <?php echo form_error('name', '<div class="text-danger">', '</div>'); ?> 
      <input type="hidden" name="name_check" value="<?php echo $layout['name'];?>" /> 
     </div> 
    </div> 

    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="submit" class="btn btn-primary">Save changes</button> 
    </div> 
    </div> 
    </div> 
</div> 

<script type="text/javascript"> 
$(function() { 
    $("#myModal<?php echo $layout['layout_id'];?>").click(function(){ 
     $.ajax({ 
      type: "POST", 
      url: "<?php echo base_url('admin/design/layout/delete');?>", 
      data: $('form').serialize(), 
      success: function(msg){ 
      }, 
      error: function(){ 
       // Need to add class if any errors 
       $("#name-<?php echo $layout['layout_id'];?>").addClass("has-error"); 
      } 
     }); 
     return false; 
    }); 
}); 
</script> 
<?php echo form_close();?> 

<?php }?> 

<?php echo $footer;?> 

控制器

<?php 

class Layout extends MX_Controller { 

    public function __construct() { 
     parent::__construct(); 
     $this->load->model('admin/design/model_layout'); 
    } 

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

     $this->form_validation->set_rules('name', 'Name', 'required|callback_name_check'); 

     // $this variable is for callbacks with MY_Form_Validation HMVC 

     if ($this->form_validation->run($this) == FALSE) { 
      return false; 
     } else { 
      return true; 
     } 
    } 

    public function name_check() { 
     if ($this->input->post('name') == $this->input->post('name_check')) { 
      return true; 
     } else { 
      $this->form_validation->set_message('name_check', 'This ' .$this->input->post('name'). ' Does Not Match'); 
      return false; 
     } 
    } 

    public function index() { 

     $this->get_list(); 
    } 

    public function get_list() { 
     $this->document->setTitle('Layouts'); 

     $data['heading_title'] = 'Layouts'; 

     $data['layouts'] = array(); 

     $results = $this->model_layout->get_layouts(); 

     if ($results) { 
      foreach ($results as $result) { 
       $data['layouts'][] = array(
        'layout_id' => $result['layout_id'], 
        'name' => $result['layout_name'], 
        'delete' => site_url('admin/design/layout/delete'), 
        'edit' => site_url('admin/design/layout/edit/' . $result['layout_id']) 
       ); 
      } 
     } 

     $selected_post = $this->input->post('selected'); 

     if (isset($selected_post)) { 
      $data['selected'] = (array)$selected_post; 
     } else { 
      $data['selected'] = array(); 
     } 

     $data['header'] = Modules::run('admin/common/header/index'); 
     $data['footer'] = Modules::run('admin/common/footer/index'); 

     $this->load->view('template/design/layout_list_view', $data); 
    } 
} 

Answer 1

如果您要提交表單通過Ajax意味着你無法驗證使用 'form_validation'。而不是你使用jquery，它很容易與jQuery驗證插件。 http://jqueryvalidation.org/， http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js

$(document).ready(function() { 
    $('#form).validate({ 
     rules: { 

      name: { 
       required: true, 
      }, 
     }, 

     messages: { 
      name: { 
       required: 'Name is required',    
      }, 
     }, 
     submitHandler: function (form) { 
       //Do you ajax coding here 
     } 
    }); 
}); 

快樂編碼：d