Jquery empty field add message beside the field - php

Question

Jquery:
$(document).ready(function(){
$("#login_form").submit(function(event){
var username = $.trim($("#username").val());
var password = $.trim($("#password").val());
if(username.length < 1){
if(!$("#user_error").length){
$("#username_error").append("<p id='user_error'>Required</p>");
}
}
if(username.length < 1|| password.length < 1){
$("#username_error").append("<p id='user_error'>Required</p>");
$("#password_error").append("<p id='pass_error'>Required</p>");
event.preventDefault();
}
});
});
View:
<? $attr = array( "id" => "login_form"); echo form_open("KGLogin/verify_login",$attr); ?>
<table id="loginform">
<tr>
<th>Log-in</th>
</tr>
<tr>
<td>
<input type="text" name="username" id='username' placeholder="Username" />
</td>
<td id="username_error"></td>
</tr>
<tr>
<td>
<input type="password" name="password" id='password' placeholder="Password" />
</td>
<td id="password_error"></td>
</tr>
<tr>
<td>
<input type="submit" name="login" value="Login" />
</td>
</tr>
</table>
<? echo form_close(); ?>
Is there a simpler way to do this? IF i submit it twice without inputting anything, it will continue to append. Im a newbie to jquery, Cant seem to find a simple way to do things, all search results in google directs me to complicated jqueries.
How do i keep the function from stacking the error message.

Answer 1

Ill just put this as an answer, so no one would suggest.
<?if(form_error('username'))echo "required";;?>

Answer 2

Put the following code in autoload file.
$autoload['helper'] = array('url','array','html','form');
Then try this in view file
<?php if (form_error('your field name'))
{
echo "required";
}
;?>