Solved

CSS placement of Javascript Validate() message

Posted on 2013-05-17
2
260 Views
Last Modified: 2013-05-17
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!
0
Comment
Question by:kkbenj
2 Comments
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 500 total points
ID: 39174979
Try Adding CSS here is my example:

	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.cbAgree
{
   margin: 10px 0;
    width: 320px;
}
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.cbAgree input{
	float:left;	
}
body.pricing #main #trial #trialform fieldset ol li.cbAgree label{
	float:right;	
}

body.pricing #main #trial #trialform fieldset ol li.cbAgree label{
	display:block;
	color: #9d1b1d;
}
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


And Your HTML:
                  
<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> I have read and agree to <a href='./terms.php'>Terms and Conditions</a>.</label>
							<input class='checkboxfull' name='cbAgree' type='checkbox' /> 
                           
					</li>
				</ol>
			</fieldset>
			<input name="button" type="submit" src="./images/starttrial.gif" alt="Complete Your Secure Transaction"/>

Open in new window

0
 

Author Closing Comment

by:kkbenj
ID: 39175068
Exactly what I needed.  Thank you.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to hide html tags in text area 4 32
Error on link 14 37
Polygon I google maps 1 14
P tag not forcing line space 2 22
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now