Question

I have a div that has an image as background, with the position for the input fields already set in the image.
As a result in the html markup I set the position of the fields absolute so they overlay over the image.
The problem I have is that when using the jquery validate plugin the error message is displayed at the top. I can’t figure our how to show it on the right of the field.

This is the code fragment :

<div id="user" style="display:none; cursor: default"> 

<form name="userForm" id="userForm" method="post" action="" >
    <input type="text" class="required" id="email" name="email" maxlength="50" />
    <input type="text" class="firstname" id="firstname" name="firstname" />
    <input type="button" id="save" name="save" />

 </form> </div>

// and the css

div#user {width:500px; height:400px;  background-image: url(/img/user.gif); background-repeat: no-repeat;}
input#email {position: absolute; left: 30px; width:200px; top:214px; height:20px;  background-color:#fff; border:0;}
input#firstname {position: absolute; left: 30px; width:200px; top:250px; height:20px; background-color:#fff; border:0;}

Thank you for your time
Justin

Answer 1

You can change where the errors appear with the callback errorPlacement().

$("#myform").validate({
  errorPlacement: function(error, element) {
     error.appendTo( element.parent("td").next("td") );
   },
   debug:true
 })

Source.