How to display validation errors on same dialog? - php

Question

I am using codeigniter HMVC. I'm trying to create a sign up form that opens when sign up button is clicked. However, validation errors for the sign-up form appears on the parent page where the login form is located the dialog also closes after submitting data. What I want to do is to display the errors on the sign-up form dialog.
vw_login.php
<button id="show-sign-up-dialog">Sign Up</button>
<dialog id="sign-up-dialog" >
<button id="close"><i class="fa fa-times"></i></button>
<?php echo form_open('user/sign_up', 'id = "reg_form" class="form-horizontal" role="form"'); ?>
<!-- REGISTER USERNAME -->
<div class="form-group">
<div class="col-12">
<label for="name"></label>
<?php
$regi_username_attrib = array(
'name' =>'register_username',
'class'=>'form-control mdl-input-login',
'rows' =>'4',
'placeholder'=>'Username'
);
echo form_error('register_username');
echo form_input($regi_username_attrib, set_value('register_username', ''));
?>
</div>
</div>
//Script to submit sign up form
<script>
$(document).on("click", "#btn_sign_up", function ()
{
$.ajax({
type: "POST",
url: "<?php echo base_url('user/sign_up');?>",
data: $(this).serialize(),
success: function(data) {
var obj = $.parseJSON(data);
if(obj!==null)
{
$('#error_msg').html(obj['error_message']);
}
}});
});
</script>
//Script to open sign up form
<script>
var dialog_AddEntry = document.querySelector('#sign-up-dialog');
var showDialogButton_AddEntry = document.querySelector('#show-sign-up-dialog');
if (! dialog_AddEntry.showModal) {
dialogPolyfill.registerDialog(dialog_AddEntry);
}
showDialogButton_AddEntry.addEventListener('click', function() {
dialog_AddEntry.showModal();
});
dialog_AddEntry.querySelector('#close').addEventListener('click', function() {
dialog_AddEntry.close();
});
</script>
Controller
class User extends My_Controller {
public function index()
{
$this->load->view('vw_login');
}
public function login()
{
//|is_unique[tbl_user.user_username]
$this->load->library('form_validation');
$this->form_validation->set_rules('username', 'Username', 'trim|required');
$this->form_validation->set_rules('password', 'Password', 'trim|required');
if ($this->form_validation->run() == FALSE) // If username and password is invalid
{
$this->load->view('vw_login');
}
else
{
}
}
public function sign_up()
{
$this->load->library('form_validation');
$this->form_validation->set_rules('register_username', 'Username', 'trim|required');
if ($this->form_validation->run() == FALSE) // If username and password is invalid
{
$this->load->view('vw_login');
$data = array('error_message' => form_error('register_username'));
echo json_encode($data);
}
else
{
}
}
}

Answer 1

Add the following
<span id="error_msg"></span>
after
<label for="name"></label>