Display validation error within a popup window (modal) - ajax

Question

I want to display the form validation error within the Modal, but the errors are being displayed in a new page
View
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<div id="modelError">hi</div>
<?php echo form_open('welcome/add_data','id="myform"'); ?>
<div class="form-group">
<label for="user_name" class="col-sm-4 control-label">User Name</label>
<div class="col-sm-12">
<input class="form-control" type="text" name="user_name" id="user_name">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-4 control-label">Name</label>
<div class="col-sm-12">
<input class="form-control" type="text" name="name" id="name">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="add">Save</button>
</div>
<?php echo form_close(); ?>
</div>
</div>
</div>
Ajax
<script>
$(document).ready(function () {
$(document).on('submit','#myform',function(event){
event.preventDefault();
let name=$("#name").val();
let user_name=$("#user_name").val();
$.ajax({
url:"<?php echo base_url(). 'welcome/add_data';?>",
method: 'POST',
data:new FormData(this),
contentType:false,
processData:false,
success: function(data) {
var myObj = JSON.parse(data);
var msg = '<div class="alert alert-danger alert-dismissable">'+myObj.error+'</div>';
$('#modelError').html(msg);
},
error: function() {
alert('Error get data from ajax');
}
}
});
})
})
</script>
Controller
public function add_data(){
$this->form_validation->set_rules('name', 'Name', 'required');
$this->form_validation->set_rules('user_name', 'User Name', 'required');
if ($this->form_validation->run() == FALSE) {
$this->msg['error'] = validation_errors();
echo json_encode($this->msg);
}
else {
$data=array(
'name'=>$this->input->post('name'),
'user_name'=>$this->input->post('user_name'),
);
$this->Test_model->add_data($data);
redirect('welcome',"refresh");
}
}
I expect the errors within the Modal (pop up window), but the errors are displayed in a new page "localhost/ajax/welcome/add_data"
I have tried lots of code snippets from stackoverflow but none of them works.