jQuery errorPlacement / error positioning problem

[simplypixie]

I have finally got around to utilising jQuery form validation on a new site I am doing the coding for and even though everything is working exactly as it should I need to move one of the error messages to display below rather than to the right as the other error messages and even though I have an idea of how it is done I can't get it to work (of course I may be way off).

What I have done in the form so far is this

<p><label for="tsandcs">&nbsp;</label>
<input name="tsandcs" id="tsandcs" type="checkbox" style="width:20px;" class="required" value="<?php if (isset($_POST['tsandcs'])) { echo 'checked'; } ?>"  /> I agree to the Terms and Conditions </p>
<div id="tsandcs_error"></div>

And the JS

errorLabelContainer:("#tsandcs"),
	errorElement: "p",
	errorPlacement: function(error, element){
		error.appendTo($("div#tsandcs_error"));
	}

I really could do with some help as I need the error text to display underneath the "I agree to ....." text rather then to the right.

[Airshow]

HTML and js look fine. I would guess the solution lies in CSS.

Airshow

[simplypixie]

OK, thank you. To be honest I thought it would just move the error message into the empty div but presumably not with css formatting on that div.

[Airshow]

The div probably has a css float directive. If so, try removing it.

[simplypixie]

There was no initial styling on the div and the label.error is set to float: none;. Anyway, I thought I would try adding some styling to see if I can move the text (have tried various postions, floats etc) but still nothing.

Am I right in thinking that I should be able to see the error text within the div tags when I view source if the error text is being correctly appended to the div?

[Airshow]

No. View source shows the originally served HTML. It does not reflect changes made to the DOM's (ie the page's) structure or content thereafter.

To see the current state of the page, use Firefox's Firefly or Opera's Dragonfly. I think MS offer something similar for IE.

Airshow

[simplypixie]

Thank you - anything for Chrome??? :)

I will test it in Fireefox

[Airshow]

For FireFox, I should have said "Firebug". "Firefly" also exists but it's file manager plugin.

There's a "Firebug Lite" for use with Chrome.

Airshow

[simplypixie]

I knew what you meant :) I am looking in it and none of it makes sense to me but never mind.

[Airshow]

I'm sure it will be something simple. I think it's got to be CSS because the natural rendering of the HTML would be to put the <div> (block element) under <label> and <input> (inline elements).

CSS is the only thing that will change this default rendering to give a side-by-side layout.

Try suppressing CSS completely to see the whole page with default rendering. Where does the <div> now sit in relation to the <label> and <input>?

[simplypixie]

I have now applied some different styling to the css and things are working much better. I just need to work out how to place the last of the error messages differently to the others and I will be sorted.

[simplypixie]

I did solve this issue with pure CSS, no errorPlacement used at all in the end.

[Airshow]

Congratulations Simply. It's satisfying when everything all falls into place. I know the feeling.

Airshow