When I submit my form on my bootstrap modal, if any errors found I would like to be able to add class and stop it from closing if any errors found
What is the best solution
Script
PHP Code:
<script type="text/javascript">
$( "#layout-form<?php echo $layout['layout_id'];?>" ).submit(function( event ) {
event.preventDefault();
$.ajax({
url: <?php echo base_url('admin/design/layout/delete');?>,
});
// Need to add class if any errors
$("#name-<?php echo $layout['layout_id'];?>").addClass("has-error");
});
</script>
Controller Delete Function
PHP Code:
public function delete() {
$this->load->library('form_validation');
$this->form_validation->set_rules('name', 'Name', 'required|callback_name_check');
// $this variable is for MY_Form_validation library HMVC.
if ($this->form_validation->run($this) == 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;
}
}
View
PHP Code:
<?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">×</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" />
<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">
$( "#layout-form<?php echo $layout['layout_id'];?>" ).submit(function( event ) {
event.preventDefault();
$.ajax({
url: <?php echo base_url('admin/design/layout/delete');?>,
});
// Need to add class if any errors
$("#name-<?php echo $layout['layout_id'];?>").addClass("has-error");
});
</script>
<?php echo form_close();?>
<?php }?>
<?php echo $footer;?>
There's only one rule - please don't tell anyone to go and read the manual. Sometimes the manual just SUCKS!
