Hey there! Can anyone advise me on this one?

I'm trying to target and replace the contents of my existing input [label] tag with my error message instead of relying on the validate plugin's default behaviour, ie. adding another [label] to the DOM either above of below my input field.

Here's the form, nothing fancy!

<form id="loginForm" action="testing.htm"> 
 

<label for="username">Username</label> 
    
<input id="username" name="username" type="text"> 
 

<label for="password">Password</label> 
    
<input id="password" name="password" type="text"> 
 

<label for="clientid">Client ID</label> 
    
<input id="clientID" name="clientID" type="text"> 
 

<input id="submitButton" name="submitButton" type="submit" value="Login"> 

...and here's the scripting

<script type="text/javascript"> 
 
$("#loginForm").validate({ 
 
    rules: { 
        username: "required", 
        password: { 
            required: true, 
            digits: true 
        }, 
 
        clientID: "required" 
        }, 
 
    messages: { 
        username: "Please enter your username", 
        password: "Please enter your password", 
        clientID: "Please enter a client ID"             
    }, 
 
    errorPlacement: function(error, element) {},         
 
}); 

As you can see I have left out errorPlacement code empty in the hope that someone can help me fill in the blanks. I have tried the following with no success.

errorPlacement: function(error, element) { 
    error
.insertBefore( element ); 
} 

Any advice on this would be great! I'm starting to pull my hair out ;o(

cheers Decbrad