Solved

CSS placement of Javascript Validate() message

Posted on 2013-05-17
2
266 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

828 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