Solved

CSS placement of Javascript Validate() message

Posted on 2013-05-17
2
274 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses

623 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