asked on

CSS placement of Javascript Validate() message

I have 3 fields, all of which are required.

The error messages display below the text boxes correctly, but on the checkbox, the error message goes before the checkbox statement.

I believe this can be rectified with CSS but everything I've tried makes no difference.

<!DOCTYPE HTML>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
	<meta charset='utf-8' />
	<link href='./css/gnd.css?v=2' rel='stylesheet' />
	<link href='./favicon.ico' rel='shortcut icon' />
	<script src='./js/libs/jquery-1.7.1.min.js'></script>
	<script src='./js/libs/modernizr-1.6.min.js'></script>
</head>

<body class='pricing'>
    <header>
	</header>
	<div id="main">
		<div id='trial'>
			<?php
			echo "<form id='trialform' name='trialform' action='".$_SERVER["PHP_SELF"]."' method='POST'>";
			?>
			<p class="size11 alignleft bold">* All fields are required</p>
			<fieldset>
				<ol>
					<li class='required name'>
						<label>Charity Contact First Name</label>
						<input name='client_firstname' type='text' />
					</li>
					<li class='required name'>
						<label>Charity Contact Last Name</label>
						<input name='client_lastname' type='text' />
					</li>
				</ol>
			</fieldset>
			<fieldset>
				<ol>
					<li class='required-field cbAgree'>
						<label>
							<input class='checkboxfull' name='cbAgree' type='checkbox' />&nbsp;&nbsp;I have read and agree to <a href='./terms.php'>Terms and Conditions</a>.
						</label>
					</li>
				</ol>
			</fieldset>
			<input name="button" type="submit" src="./images/starttrial.gif" alt="Complete Your Secure Transaction"/>
			</FORM>
		</div>
    <script src='./js/libs/jquery.validate.min.js'></script>
    <script type='text/javascript'>
	$(document).ready(function(){
		$("#trialform").validate({
			rules: {
				client_firstname: "required",
				client_lastname: "required",
				charity_name: "required",
				cbAgree: "required",
				client_email: {
					required: true,
					email: true
                }
			},
			messages: {
				client_firstname: "Please enter your first name.",
				client_lastname: "Please enter your last name.",
				charity_name: "Please enter the name of your charity.",
				cbAgree: "Please read and agree to the Terms and Conditions",
				client_email: "Please enter a valid e-mail address"
			}
          });
        });
    </script>
	</div>
</body>

</html>

Open in new window

CSS:

body.pricing #main
{
    margin: 0 auto;
	width: 1050px;
    background: #fff;
}
body.pricing #main #trial #trialform label img.changeradio
{
	margin: 10px;
}
body.pricing #main #trial #trialform fieldset ol
{
    width: 930px;
    list-style: none;
    margin-left: 30px;
    padding: 0;
}
body.pricing #main #trial #trialform fieldset ol li.name
{
    float: left;
    width: 229px;
    margin: 10px 0;
}
body.pricing #main #trial #trialform fieldset ol li.name label
{
    display: block;
    text-align: left;
    color: #9d1b1d;
	margin-left: 10px;
	font-weight: bold;
}
body.pricing #main #trial #trialform fieldset ol li input[type="text"]
{
    border: none;
    margin: 0;
    width: 197px;
    padding: 5px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    -moz-box-shadow: #bbbbbb 0 1px 2px inset;
    -webkit-box-shadow: #bbbbbb 0 1px 2px inset;
    -o-box-shadow: #bbbbbb 0 1px 2px inset;
    box-shadow: #bbbbbb 0 1px 2px inset;
}
body.pricing #main #trial #trialform fieldset ol li input[type="email"] 
{
    border: none;
    margin: 0;
    width: 197px;
    padding: 5px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    -moz-box-shadow: #bbbbbb 0 1px 2px inset;
    -webkit-box-shadow: #bbbbbb 0 1px 2px inset;
    -o-box-shadow: #bbbbbb 0 1px 2px inset;
    box-shadow: #bbbbbb 0 1px 2px inset;
}
body.pricing input[type="radio"]
{
    position: absolute;
    left: -9999px;
    vertical-align: text-bottom;
	margin-right: 3px;
}
body.pricing #main #trial #trialform fieldset ol li.name select
{
    border: none;
    margin: 0;
    width: 205px;
    padding: 5px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    -moz-box-shadow: #bbbbbb 0 1px 2px inset;
    -webkit-box-shadow: #bbbbbb 0 1px 2px inset;
    -o-box-shadow: #bbbbbb 0 1px 2px inset;
    box-shadow: #bbbbbb 0 1px 2px inset;
}
body.pricing #main #trial #trialform fieldset ol li.error
{
    background-color: #f8e3e4;
    border-color: #9d1b1d;
}

Open in new window

Thanks for any help!

ASKER CERTIFIED SOLUTION

Jagadishwor Dulal

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kkbenj

ASKER

Exactly what I needed. Thank you.