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.

Your if statement is wrong see the CodeIgniter Users Guide - Input Library

PHP Code:

$this->input->is_ajax_request(); 


Also if you read the CodeIgniter Users Guide on the Form_validation Library you can place the error code below any field or at the top.

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

Your if statement is wrong see the CodeIgniter Users Guide - Input Library

PHP Code:

$this->input->is_ajax_request(); 


Also if you read the CodeIgniter Users Guide on the Form_validation Library you can place the error code below any field or at the top.

Yes there is 

PHP Code:

echo form_error(''); 


function to do so but it work only we have normal POST type submit. please go through again my post you'll understand what exactly i want.

A single ajax call has a single return value. So the way to do this is to return values which your JS then decodes. For each field you will have to check your return value, ie the validation errors, to see if an error was set or not for each field, and if it was set for that field, update an error holder for that field via JS.

What I do this via ajax I use the single error message like you do. But I spend some time constructing a nice error message from the existing errors (usually easier to do this in the controller).

For instance, if the username and password are missing, I would return an error message of 'You did not submit any login details'. If the username and password do not match, or the username does not exist, I would not reveal that information but return a generic 'The username and password combination you tried are not valid. Please check your details carefully and try again.'.

Some people do some JS validation on top of this too, so blank fields are not submitted anyway, again generating a standard error message from within the JS. You still have to do it server side though as someone could be manipulating the code to bypass user side validation.

Hope that helps,

Paul.

PS Don't forget to add a 'forgotten password' routine and a 'forgotten username' routine too.