JQuery error placement check

Question

Unfortunately, I did not have much success in finding a solution to this problem, so here it goes again ...

Basically, I'm trying to target and replace the contents of my existing input [label] tag with my error message instead of relying on the default behavior for the Validate plugin, i.e. adding one more [label] in the DOM or above my input field.

Here is the shape, nothing unusual!

<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 are the scripts

 <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 left the errorPlacement code empty in the hope that someone could help me fill in the blanks. I tried the following without success.

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

Any advice on this would be great! I begin to stretch my hair; o (

amuses Decbrad

Answer 1

You should be able to do something similar in your callback.

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

I ask this question because, as soon as the error is fixed, I think your shortcut will disappear. You can use the approach I provided to find another label and hide it, but you will also need to override the success callback to show the original label again.