How to Show Codeigniter Validation Errors in Popup using AJAX - codeigniter

Question

Hello Everybody I am new with Codeigniter I have a Registration form Popup.When User tries to Register. it register with using ajax but when user input invalid details it should shows Codeigniter Error Messages but it won't and popup automatically closed. what should i do. plz help

Answer 1

This is My Controller Function:-
public function register(){
$title['pageTitle'] = 'Register Page';
$this->load->library('form_validation');
$this->load->model('User_model');
$this->form_validation->set_error_delimiters('<div class = "error">','</div>');
$this->form_validation->set_rules('firstname','First Name','trim|required|alpha|min_length[3]|max_length[30]');
$this->form_validation->set_rules('lastname','Last Name','trim|required|alpha|min_length[3]|max_length[30]');
$this->form_validation->set_rules('email','Email','required|valid_email|is_unique[users.email]');
$this->form_validation->set_rules('password','Password','trim|required|md5');
$this->form_validation->set_rules('cpassword','Confirm Password','trim|required|md5|matches[password]');
if($this->form_validation->run() == false){
echo validation_errors();
}else {
$data['userdata'] = $this->User_model->addUser();
}
}
This is My Model funtion :-
public function addUser(){
$data = array(
'firstname' => $this->input->post('firstname'),
'lastname' => $this->input->post('lastname'),
'email' => $this->input->post('email'),
'password' => $this->input->post('password'),
);
$q = $this->db->insert($this->tablename,$data);
return $result = $q->result_array();
}
This is My View(Popup):-
<div class="modal fade login_form" id="signin_model" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content pdng_mdls">
<div class="modal-header model_hdngs">
<i class="fa fa-times" aria-hidden="true"></i>
<h4 class="modal-title" id="exampleModalLabel"></h4>
</div>
<div class="modal-body">
<div class="mdl_hdrs">
<?php echo form_label('Create Your Account', 'createyouraccount'); ?>
</div>
<?php
$attributes = array('name' => 'myform','id'=>'reg_form');
echo form_open('',$attributes); ?>
<div class="row">
<div class="col-sm-6">
<?php echo form_label('First Name:', 'firstname'); ?>
<?php echo form_input(array('id' => 'firstname','class'=>'inpt_bhg cracnt','name' => 'firstname','placeholder'=>'First Name'));?>
<span class="text-danger"><?php echo form_error('firstname'); ?></span>
</div>
<div class="col-sm-6">
<?php echo form_label('Last Name:', 'lastname'); ?>
<?php echo form_input(array('id' => 'lastname','class'=>'inpt_bhg cracnt','name' => 'lastname','placeholder'=>'Last Name'));?>
<span class="text-danger"><?php echo form_error('lastname'); ?></span>
</div>
<div class="col-sm-12">
<?php echo form_label('Email:', 'email'); ?>
<?php echo form_input(array('id' => 'email','class'=>'inpt_bhg cracnt','name' => 'email','placeholder'=>'Email Address'));?>
<span class="text-danger"><?php echo form_error('email'); ?></span>
</div>
<div class="col-sm-12">
<?php echo form_label('Password:', 'password'); ?>
<?php echo form_password(array('id' => 'registerpassword','class'=>'inpt_bhg cracnt','name' => 'password','placeholder'=>'Password'));?>
<span class="text-danger"><?php echo form_error('password'); ?></span>
</div>
<div class="col-sm-12">
<?php echo form_label('Confirm Password:', 'password'); ?>
<?php echo form_password(array('id' => 'registerpassword','class'=>'inpt_bhg cracnt','name' => 'cpassword','placeholder'=>'Confirm Password'));?>
<span class="text-danger"><?php echo form_error('cpassword'); ?></span>
</div>
</div>
<div class="progress model_progress_bar" id="example-progress-bar-hierarchy-container">
</div>
<div class="ps_str">Password Strength</div>
<span id = "example-getting-started-text"></span>
<div class="final_sbmt_btns">
<?php echo form_submit('submit', 'Create Account','class="finl_sbmt_btns"');?>
</div>
</form>
<div class="go_backs">Go Back</div>
</div>
</div>
</div>
</div>
And This is my AJAX :-
<script type="text/javascript">
$(document).ready(function() {
$('#reg_form').submit(function(){
$.ajax({
type: "POST",
url: BASE_URL + "User_Controller/register/",
data: $("#reg_form").serialize(),
success: function(res){
alert(res);
}
});
});
});
</script>