Reposition jQuery validation plugin error message?

Question

I use the jQuery validation plugin, and when I add the class needed for text fields, it validates the fields. However, an error message is displayed after the text box, and I wonder if I can show it after the label in the corresponding text box?

I have a page in an iframe, and when two or more error messages are displayed, the form gets too big to fit the iframe.

My shortcuts and text fields:

<asp:Label ID="lblName" runat="server" Text="Your Name" /> <asp:TextBox ID="txtName" CssClass="required" runat="server"/> <br /> <asp:Label ID="lblEmail" runat="server" Text="Your Email"/> <asp:TextBox ID="txtEmail" CssClass="required email" runat="server"/> <br /> <asp:Label ID="lblNumber" runat="server" Text="Your Number"/> <asp:TextBox ID="txtNumber" CssClass="required" runat="server"/> <br /> <asp:Label ID="lblSubject" runat="server" Text="Subject"/> <asp:TextBox ID="txtSubject" CssClass="required" runat="server"/> <br /> <asp:Label ID="lblDetails" runat="server" Text="Details"/> <asp:TextBox ID="txtDetails" CssClass="required" TextMode="MultiLine" runat="server"/> <br /> <asp:Button ID="btnSubmit" CssClass="SubmitButton" runat="server" Text="" onclick="btnSubmit_Click" /> <asp:Label ID="lblResponse" CssClass="Response" runat="server" Text=""></asp:Label> 

Thanks in advance.

Answer 1

Use errorPlacement. Example:

  $("#field-GeoLatlon").validate({ rules: { "parameters[postcode]": { isPostcode: true }, "parameters[houseno]": { startsWithNumber: true } }, errorPlacement: errorPlacement }); function errorPlacement(error, element) { var errorDD = $('<dd class="error"></dd>').insertAfter(element.parent('dd').next('dd')); error.appendTo(errorDD); }