Solved

CSS placement of Javascript Validate() message

Posted on 2013-05-17
2
257 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
Comment Utility
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
Comment Utility
Exactly what I needed.  Thank you.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

771 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

11 Experts available now in Live!

Get 1:1 Help Now