Displaying error messages below the field

I am using ajax to validate  a form with dynamic fields. this is how the errors being displayed now (all in one position).





JS file

Code:

$(document).ready(function() {
$('#submit').click(function() {
var form_data = {
username : $('.username').val(),
password : $('.password').val(),
ajax : '1'
};
$.ajax({
//url: "<?php echo site_url('login/ajax_check'); ?>",
url: "/job/job/ajax_check",
type: 'POST',
async : false,
data: form_data,
success: function(msg) {
$('#message').html(msg);

}
});
return false;
});
});

Controller 

PHP Code:

function ajax_check() {
if($this->input->post('ajax') == '1') {
$this->form_validation->set_rules('username', 'username', 'trim|required');
$this->form_validation->set_rules('password', 'password', 'trim|required');
//$this->form_validation->set_message('required', 'Please fill in the fields');

$this->form_validation->set_error_delimiters('<div class="alert alert-danger alert-dismissible">','</div>');


if($this->form_validation->run() == FALSE) {

echo validation_errors();
} 

else {
echo 'login successful';
}
}


} 


All i want is to show the error messages after each respective field. Help appreciated.