Codeigniter Validation Not Working With AJAX

Question

I use codeigniter form validation to submit my form on my modal. But when there is a error the model should be able to add my class and display the form validation message. My script function not seem to be working correct. I have the script in my modal for-each loop.

Question: When I submit my form on my bootstrap modal, How can I make it add my has-error class and prevent it from close only if any errors showing with codeigniter.

Script

<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>

View

<?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;?>

Controller

<?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);
    }
}

Giri Annamalai M · Accepted Answer · 2015-10-01 06:24:19Z

1

If you are submitting your form through Ajax means you can not validate using 'form_validation'. Instead of you are using Jquery, Its easy to go with jquery validation plugin. 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
        }
    });
});

Happy coding :D

answered Oct 1, 2015 at 6:24

Giri Annamalai M

80910 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user4419336 Over a year ago

Thanks I would like to be able to use the codeigniter validation method if possible with my script.

Collectives™ on Stack Overflow

Codeigniter Validation Not Working With AJAX

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related