how can I put validation_errors() at the right side of textfield?

Question

I have followed the learning tutorials in CodeIgniter and Im currently creating a program using the same procedure on my reference(link posted below) where there is a log-in form. I have no problem with the functions, I just want to put the validation_errors() at the right side of the textfield where if the username is empty or incorrect, the error message will display on the right side of the textfield. Is there a way to do this? or should I use javascript instead of using this validation_errors()? Hope someone will help me. Thanks!

Here's the code in VIEW:

<h3>Log-In with CodeIgniter</h3>
<?php echo validation_errors(); ?>
<?php echo form_open('verifylogin'); ?>
<label for="username">Username:</label>
<input type="text" size="20" id="username" name="username"/>
<br/>
<label for="password">Password:</label>
<input type="password" size="20" id="password" name="password"/>
<br/>
<input type="submit" value="Log-In"/>
</form>

Here's the code in CONTROLLER:

    function index() {
    $this->load->library('form_validation');
    $this->form_validation->set_rules('username', 'Username', 'trim|required|xss_clean');
    $this->form_validation->set_rules('password', 'Password', 'trim|required|xss_clean|callback_check_database');
    if($this->form_validation->run()==FALSE) {
        $this->load->view('login_view');
    }
    else {
        redirect('home', 'refresh');
    }
}

function check_database($password) {
    $username=$this->input->post('username');
    $result=$this->user->login($username, $password);
    if($result) {
        $sess_array=array();
        foreach($result as $row) {
            $sess_array=array('id'=>$row->id, 'username'=>$row->username);
            $this->session->set_userdata('logged_in', $sess_array); 
        }
        return TRUE;
    }
    else {
        $this->form_validation->set_message('check_database', 'Invalid username or password');
        return FALSE;
    }
}

Reference: http://www.codefactorycr.com/login-with-codeigniter-php.html

Answer 1

<h3>Log-In with CodeIgniter</h3>



<?php if (form_error('password')=="Invalid username or password")
 {
    echo form_error('password');
 }
?>

<?php echo form_open('verifylogin'); ?>
<label for="username">Username:</label>
<input type="text" size="20" id="username" name="username"/><?php echo form_error('username'); ?>
<br/>
<label for="password">Password:</label>
<input type="password" size="20" id="password" name="password"/><?php echo form_error('password'); ?>
<br/>
<input type="submit" value="Log-In"/>
</form>

Answer 2

<?php echo form_open('verifylogin'); ?>

This will display all the errors of FORM at one time - they come in form of bulk errors (not splitted)

<?php echo form_error('username'); ?>
<?php echo form_error('password'); ?>

This is the right way of displaying the individual errors , where CodeIgniter provides you the way of displaying the error individually

showing individual errors in codeigniter

and search for Showing Errors Individually

You can display them in span tag at side of input fields - to get the kind of O/P which you want

Answer 3

Here's what I did..

$this->form_validation->set_message('check_database', '<br/><br/>Invalid username or password');

I added <br/> to Invalid username or password so that it will not place to password field.