Replace label contents with error message

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">

</form>

...and here's the scripting

<script type="text/javascript">

    $("#loginForm").va开发者_JS百科lidate({

        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) {},        
        
    });

</script>

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 );
}

---

You should be able to do something like this in your callback.

$('label[for="' + element.attr("id") + '"]').text(error.text());

I question this approach, though, because once the error is fixed, I think your label will be gone. You could use the approach I provided to find the other label and hide it, but you would also need to override the success callback to show the original label again.