Develop Reference

Apply Color Picker Selection to Div Font

How would I apply the selected color from the color-picker to the these divs: #header, #subHeader, #button ?
How can I hide the border of the div #button until the user types text into <input id="text3" class="textInput">
$(document).ready(function(){
var div1 = $('#header')[0];
$('#text1').bind('keyup change', function() {
div1.innerHTML = this.value;
});
var div2 = $('#subHeader')[0];
$('#text2').bind('keyup change', function() {
div2.innerHTML = this.value;
});
var div3 = $('#button')[0];
$('#text3').bind('keyup change', function() {
div3.innerHTML = this.value;
});
});
$(".basic").spectrum();
$(".override").spectrum({
color: "yellow"
});
$(".startEmpty").spectrum({
allowEmpty: true
});
.wrapper {
padding: 10px;
border: 2px solid black;
}
h2 {
margin: 20px 0 5px;
font-size: 16px;
font-family: "helevtica", sans-serif;
font-weight: 400;
}
#header {
font-size: 60px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 400;
margin: 10px 0;
padding: 20px;
}
#subHeader {
font-size: 24px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 300;
margin: 10px 0;
padding: 20px;
display: block;
}
#button {
font-size: 16px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 400;
margin: 30px 0;
padding: 16px 24px;
border: 2px solid #000;
border-radius: 3px;
text-align: center;
}
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/spectrum.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/spectrum.js"></script>
<div class="wrapper">
<div id="header"></div>
<div id="subHeader"></div>
<div id="button"></div>
</div>
<h2>Header</h2><input id="text1" class="textInput">
<h2>Subheader</h2><input id="text2" class="textInput">
<h2>Button</h2><input id="text3" class="textInput">
<h2>Color</h2>
<input type='text' class="basic" />

This will change your #subHeader color.
$(document).ready(function(){
var div1 = $('#header')[0];
$('#text1').bind('keyup change', function() {
div1.innerHTML = this.value;
});
var div2 = $('#subHeader')[0];
$('#text2').bind('keyup change', function() {
div2.innerHTML = this.value;
});
var div3 = $('#button')[0];
$('#text3').bind('keyup change', function() {
div3.innerHTML = this.value;
if(this.value.length > 0) {
$('#button').css('display', 'block')
} else {
$('#button').css('display', 'none')
}
});
});
$(".basic").spectrum({
change: function(color) {
console.log(color.toHexString());
$('#subHeader').css('color',color.toHexString());
var s = '2px solid ' + color.toHexString();
$('#button').css('border', s);
}
});
$(".override").spectrum({
color: "yellow"
});
$(".startEmpty").spectrum({
allowEmpty: true
});
.wrapper {
padding: 10px;
border: 2px solid black;
}
h2 {
margin: 20px 0 5px;
font-size: 16px;
font-family: "helevtica", sans-serif;
font-weight: 400;
}
#header {
font-size: 60px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 400;
margin: 10px 0;
padding: 20px;
}
#subHeader {
font-size: 24px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 300;
margin: 10px 0;
padding: 20px;
display: block;
}
#button {
display:none;
font-size: 16px;
color: black;
font-family: "helevtica", sans-serif;
font-weight: 400;
margin: 30px 0;
padding: 16px 24px;
border: 2px solid #000;
border-radius: 3px;
text-align: center;
}
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/spectrum.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/226140/spectrum.js"></script>
<div class="wrapper">
<div id="header"></div>
<div id="subHeader"></div>
<div id="button"></div>
</div>
<h2>Header</h2><input id="text1" class="textInput">
<h2>Subheader</h2><input id="text2" class="textInput">
<h2>Button</h2><input id="text3" class="textInput">
<h2>Color</h2>
<input type='text' class="basic" />

Add this:
$(".basic").spectrum({
change: function(color) {
console.log(color.toHexString());
//add your code here
}
});
Then you should add your code to change what you want based on the selected color. Let me know if this helped you, or if you have any other question.

CSS section on my code player is not working

Every part of the following code player works fine expect the CSS part of it.
It can display HTML and JS without problem. I've tried to fix it but I couldn't. even Chrome console is not pointing to any error. I think the problem is here:
$("#runButton").click(function() {
$('#resultFrame').contents().find('html').html("<style>"+$
('#css').val()+"</style>"+$("#html").val());
document.getElementById('resultFrame').contentWindow.eval( $
('#js').val() );
});
And here is all of the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sadegh's code player</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
#menubar {
width: 100%;
height: 40px;
background-color: #6C4141;
}
#logo {
padding: 10px 0 0 15px;
font-weight: bold;
font-size: 1.15em;
float: left;
color: white;
text-shadow: 1px 1px 3px gray;
}
#button {
float: right;
padding: 5px 20px 0 0;
}
#runButton {
font-size: 1.15em;
font-weight: bold;
height: 30px;
width: 60px;
border-radius: 4px;
color: #875D5D;
border: 1px solid #8E7272;
background-color: white;
text-shadow: 1px 1px black;
}
#runButton:hover {
background-color: #8E7272;
color: white;
border: 1px solid white;
}
#toggles {
width: 400px;
margin: 0px auto;
height: 100%;
}
#toggles ul {
list-style-type: none;
}
.toggleLi {
display: inline-block;
padding: 7px 5px 5px 5px;
border: 1px solid white;
border-radius: 5px 5px 0 0;
background-color: #8E7272;
height:30px;
margin-top: 10px;
width: 95px;
text-align: center;
border-bottom: 0;
color: white;
font-weight: bold;
}
.selected {
background-color: white;
color: #875D5D;
border: 1px solid gray;
}
.clear {
clear: both;
}
.codeContainer {
width: 25%;
float:left;
height: 100%;
position: relative;
}
.codeContainer textarea {
width: 100%;
height: 100%;
border: none;
border-right: 1px ridge #875D5D;
padding: 15px;
font-family: Console, Lucida, monospace;
font-size: 18px;
}
.codeLable {
position: absolute; top: 10px; right: 10px;
border-bottom: 1px solid #875D5D;
padding: 0 2px 2px 2px;
}
#resultFrame {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="menubar">
<div id="logo">Code Player</div>
<div id="button">
<button type="button" id="runButton">Run</button>
</div>
<div id="toggles">
<ul>
<li class="toggleLi selected">HTML</li>
<li class="toggleLi selected">CSS</li>
<li class="toggleLi selected">JS</li>
<li class="toggleLi selected">Result</li>
</ul>
</div>
<div class="clear"></div>
<!-- html container -->
<div class="codeContainer" id="HTMLContainer">
<div class="codeLable">HTML</div>
<textarea name="textarea" id="html">Some text</textarea>
</div>
<!-- css container -->
<div class="codeContainer" id="CSSContainer">
<div class="codeLable">CSS</div>
<textarea name="textarea" id="css">body {
background-color: red;
}
</textarea>
</div>
<!-- javascript container -->
<div class="codeContainer" id="JSContainer">
<div class="codeLable">JavaScript</div>
<textarea name="textarea" id="js">alert('Thatsit')</textarea>
</div>
<!-- result iframe -->
<div class="codeContainer" id="ResultContainer">
<div class="codeLable">Result</div>
<iframe id="resultFrame"></iframe>
</div>
</div><!-- end of #menubar -->
</div><!-- end of page wrapper -->
<script type="text/javascript">
var windowHeight = $(window).height();
var menubarHeight = $("#menubar").height();
var codeContainerHeight = windowHeight - menubarHeight;
$(".codeContainer").height(codeContainerHeight + "px");
$(".toggleLi").click(function(){
$(this).toggleClass("selected");
var activeDiv = $(this).html();
$("#"+activeDiv+"Container").toggle();
var showingDivs = $(".codeContainer").filter(function() {
return $(this).css("display") !== "none";
}).length;
var width = 100 / showingDivs;
$(".codeContainer").css("width",width + "%");
});
$("#runButton").click(function() {
$('#resultFrame').contents().find('html').html("<style>"+$
('#css').val()+"</style>"+$("#html").val());
document.getElementById('resultFrame').contentWindow.eval( $
('#js').val() );
});
</script>
</body>
</html>

$('#resultFrame').contents().find('html').html("<style>"+$
('#css').val()+"</style>"+$("#html").val());
The $("#html").val() will return only text not include tags,so when user input something in <textarea name="textarea" id="html">Some text</textarea>
you need to wrap into a tag,for example:user input(Some text),wrap to <p>Some text</p>or wrap inside a body tag.Hope this help you.

javascript is not working

jsp and a loginValidate.js i have provided a link to js in jsp. But the login form is not getting validates. I have a span id which should display an error message but its not happening.
my login.jsp is:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Header</title>
<script type="text/javascript" src="js/LoginValidate.js"></script>
<link href="CSS/Header.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top">
<div class="wrapper col1">
<div id="header">
<div id="logo">
<h1>
<U>SK Business Group, Inc.</U>
</h1>
<p>
<strong>Helping GROW your business</strong>
</p>
</div>
<div class="wrapper col6">
<div id="head">
<div id="login">
<h2>Login !</h2>
<B>Already have an account.LOGIN here</B>
<form name="login" action="LoginValidateServlet" method="post"
onSubmit="return loginValidate()">
<input type="hidden" name="pagename" value="login" />
<fieldset>
<legend>Client Login</legend>
<div class="fl_left">
<input type="text" name="txtUsername" id="uname" value="Enter Username…" onfocus="this.value=(this.value=='Enter Username…')? '' : this.value;" /><br />
<span id="errorUserNameMissing" style="display: none;"><font
color="red">*Enter user name.</font></span>
<input type="password" name="txtPassword" id="pass" value="Enter Password…" onfocus="this.value=(this.value=='Enter Password…')? '' : this.value ;" /><br/> <br/><span
id="errorPasswordMissing" style="display: none;"><font
color="red">*Enter Password.</font></span>
<select name="txtCategory" id="txtCategory" style="width: 230px">
<option value="unknown">Select your Category</option>
<option value="Admin">Admin</option>
<option value="Affiliate">Affiliate</option>
<option value="Client">Client</option>
</select>
</div>
<div class="fl_right">
<input type="submit" name="login_go" id="login_go"
value="»" />
</div>
</fieldset>
</form>
<p>
» Lost Your Password | Create An Account »
</p>
</div>
<br class="clear" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And this is my CSS
#CHARSET "ISO-8859-1";
#top {
margin: 0;
padding: 0;
font-size: 12px;
font-family: verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #DDDDDD;
}
.clear {
clear: both;
}
br.clear {
clear: both;
margin-top: -15px;
}
a {
outline: none;
text-decoration: none;
}
.fl_left {
float: left;
}
.fl_right {
float: right;
}
div.wrapper {
display: block;
width: 100%;
margin: 0;
text-align: left;
}
div.wrapper h1,div.wrapper h2,div.wrapper h3,div.wrapper h4,div.wrapper h5,div.wrapper h6
{
margin: 0 0 20px 0;
padding: 0 0 8px 0;
font-size: 20px;
font-weight: normal;
font-family: Georgia, "Times New Roman", Times, serif;
border-bottom: 1px dotted #DDDDDD;
}
.col1 {
color: #2684B7;
background-color: #E3F1F9;
}
.col6 {
color: #999999;
background-color: #F3F3F3;
}
.col6 a {
color: #2684B7;
background-color: #F3F3F3;
}
#logo {
width: 378px;
}
#header,#head {
color: #2684B7;
position: relative;
margin: 0 auto 0;
display: block;
width: 960px;
}
#header {
padding: 30px 0;
font-family: Georgia, "Times New Roman", Times, serif;
}
#header #logo {
display: block;
float: left;
width: 300px;
width: 100%;
margin-top: 7px;
}
#header #logo h1,#header #logo p {
margin: 0;
padding: 0;
line-height: normal;
}
#header #logo h1 {
margin: 0 0 10px 0;
padding: 0;
font-size: 36px;
border: none;
}
#header h1 a {
color: #3A6C86;
background-color: #E3F1F9;
}
#header #login {
width: 300px;
height: 250px;
float: right;
padding: 10px 10px 12px 10px;
color: #000000;
background-color: #ADD6ED;
}
#header #login p {
margin: 0 0 8px 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#head {
padding: 30px 0;
}
#head h2 {
margin-bottom: 10px;
border-bottom: 1px dotted #999999;
}
#login {
display: block;
float: right;
width: 300px;
}
form,fieldset,legend {
margin: 0;
padding: 0;
border: none;
}
legend {
display: none;
}
#header input {
display: block;
float: left;
width: 155px;
margin: 0 11px 0 0;
padding: 5px;
color: #4C4C4C;
background-color: #FFFFFF;
border: 1px solid #396B86;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#header input#login_go {
width: auto;
height: auto;
margin: 0;
padding: 4px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
background-color: #4D9FC7;
cursor: pointer;
}
#head form {
display: block;
width: 300px;
margin: 0;
padding: 10px 0 0 0;
border: none;
}
#head input {
display: block;
width: 218px;
margin: 0 0 10px 0;
padding: 5px;
color: #FFFFFF;
background-color: #2684B7;
border: 1px solid #1C5E82;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#head input#login_go {
width: 58px;
height: 100px;
margin: 0;
padding: 0;
font-weight: bold;
text-transform: uppercase;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 60px;
cursor: pointer;
}
#head select#txtCategory {
width: width:956px;
}
And this is my LoginValidate.js
function loginValidate() {
var valid = true;
var validationMessage = 'Please correct the following errors:\r\n';
document.getElementById('errorUserNameMissing').style.display = 'none';
document.getElementById('errorPasswordMissing').style.display = 'none';
if ((document.getElementById('uname').value = 'Enter Username…')||(document.getElementById('uname').value.length == 0) ){
validationMessage = validationMessage + ' - UserName is missing\r\n';
document.getElementById('errorUserNameMissing').style.display = 'block';
valid = false;
} else {
document.getElementById('errorUserNameMissing').style.display = 'none';
}
if ((document.getElementById('pass').value = 'Enter Password…')||(document.getElementById('pass').value.length == 0) ){
validationMessage = validationMessage + ' - Password is missing\r\n';
document.getElementById('errorPasswordMissing').style.display = 'block';
valid = false;
} else {
document.getElementById('errorPasswordMissing').style.display = 'none';
}
if (valid == false) {
alert(validationMessage);
}
return valid;
}
please some one help in validating the login page with errors on not providing any input(it should display respective error message).
Thanks in advance

In the JavaScript
document.getElementById('uname').value
returns "Enter Username…" that is the default value and
document.getElementById('uname').value.length
returns 15 that's why the condition is not matched.
You have to check for default value along with length.
document.getElementById('uname').value = 'Enter Username…'
But once this field is focused the value is empty and it works fine.

your code provide null pointer exception here
document.getElementById('errorPassWordMissing').style.display = '';
exception raise and your function does not return false and form post data.
use placeholder property instead of value and focus event, for example
<input type="password" name="txtPassword" id="pass" placeholder="Enter password…" />
also may be you should use jQuery and validation plugin
http://plugins.jquery.com/validate/

One obvious problem I can see. This is wrong:
document.getElementById('errorUserNameMissing').style.display = '';
You shouldn't be setting style.display to a blank string. It should be one of the standard CSS display types, like "inline" or "block" (and there are other types).

What is wrong with this tabbed content?

I have a google map and a contact form on my contact.html file. They were displayed block as default. I wanted to change it to a tabbed look.
Let's say i have a code like this in HTML:
<div id="tab-group" class="tab-group">
<h3 class="tab-header activate" id="tab-header-1">We are here</h3>
<div class="tab-content activate" id="tab-content-1"></div>
<h3 class="tab-header" id="tab-header-2">Contact us</h3>
<div class="tab-content" id="tab-content-2">
The content in that div with the id="tab-content-1" , I have a google map with the necessary script in the head. And in div with the id="tab-content-2", I have a contact form like;
<form class="tab-content-2" method="post" action="contact-post.html">
<div>
<span><label>NAME</label></span>
<span><input name="userName" type="text" class="textbox"></span>
</div>
<div>
<span><label>E-MAIL</label></span>
<span><input name="userEmail" type="text" class="textbox"></span>
</div>
<div>
<span><label>PHONE</label></span>
<span><input name="userPhone" type="text" class="textbox"></span>
</div>
<div>
<span><label>YOUR MESSAGE</label></span>
<span><textarea name="userMsg"> </textarea></span>
</div>
<div>
<span><input type="submit" value="Send me"></span>
</div>
</form>
Here is the JavaScript:
"use strict";
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('tab-group').className = 'activate';
var headerClass = 'tab-header',
contentClass = 'tab-content';
document.getElementById('tab-group').addEventListener('click', function(event) {
var myHeader = event.target;
if (myHeader.className !== headerClass) return;
var myID = myHeader.id, // e.g. tab-header-1
contentID = myID.replace('header', 'content'); // result: tab-content-1
deactivateAllTabs();
myHeader.className = headerClass + ' activate';
document.getElementById(contentID).className = contentClass + ' activate';
});
function deactivateAllTabs() {
var tabHeaders = document.getElementsByClassName(headerClass),
tabContents = document.getElementsByClassName(contentClass);
for (var i = 0; i < tabHeaders.length; i++) {
tabHeaders[i].className = headerClass;
tabContents[i].className = contentClass;
}
}
});
I know I have to clean all these up but i am lost in such a basic thing and getting angry, here is the CSS:
#tab-group h3 {
text-align: left;
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
}
.activate {
position: relative;
margin-bottom: 2em;
}
#tab-group.activate .tab-header {
font-weight: normal;
font-size: 13px;
text-transform: uppercase;
padding: 4px 6px;
display:inline;
}
.activate .tab-header {
position: absolute;
top: 0;
margin: 0;
padding: 0.25em 0.5em;
left: 0;
background: rgba(168, 161, 152, 0.34);
border: 1px solid #161616;
border-radius: 4px 4px 0 0;
z-index: 2;
cursor: pointer;
}
.activate .tab-header.activate {
background: #000;
}
.activate .tab-content {
position: relative;
top: 0;
margin: 0;
padding: 0.5em;
top: 24px;
border: 1px solid #999;
z-index: 1;
background: white;
zoom: 1;
}
.activate .tab-content:after {
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.activate #tab-header-2 {
left: 9em;
}
.activate .tab-content {
}
.activate .tab-content:active {
display: block;
}
#tab-content-1 {
width: 56.4em;
height:30em;
}
#tab-header-1 {
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
}
#tab-header-2 {
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
}
#tab-content-2{
position:relative;
padding-bottom:30px;
background-color:#000;
}
I want it to act like a simple tabbed content. Yet, the contents of the tabs are displayed as block and it doesn't change the content when you click on h3 tab-headers.
it looks like this.....
What am I doing wrong ? Thanks in advance...

It should just be a simple fix. Try adding:
.activate .tab-content { display: none; }
.activate .tab-content.activate { display: block; }
That way, only the active tab is visible, and the others are hidden.
Check it out: http://jsfiddle.net/t8G57/2/

confused newbie: js form validate inline

I built a form that I need to validate with JavaScript. I tried to use this post but cannot duplicate the results: inline javascript form validation
I've created a JSBin with my code so far, including CSS and JS files: http://jsbin.com/oligol/1/edit
This is my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>xxx</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css" media="all">#import "css/master.css";</style> <style type="text/css" media="all">#import "css/master.css";</style>
<script src="contact.js" type="text/javascript">
</script>
</head>
<body>
<div id="page-container">
<div id="header"> <img src="images/header.jpg" width="900" height="243" />
</div>
<div id="main-nav">
<ul id="navlist">
<li id="active"><a href="index.html" >HOME</a></li>
<li>REQUIREMENTS</li>
<li>LINKS</li>
<li>TESTIMONIALS</li>
<li>CONTACT US</li>
</ul>
</div>
<p> </p>
<div id="content">
<p><p><p>xxxxxxx welcomes all correspondence.<br />
Please use the form below for any questions, feedback and suggestions.<br />
or call <strong><em>xxx xxx </em> xxx.xxx.7009 </strong><br />
All information is confidential<br />
<!-- <b>* required fields</b>-->
<form onSubmit="return checkForm(); method="post" action="xxx#gmail.com" >
<fieldset><strong>* required fields</strong>
<legend>Contact Form</legend>
<label for="name"> Name : <span class="required"></span></label>
<div class="input">
<input type="text" name="txtName" id="name" size="30" /><span class="message"></span>
</div>
<div class="error" id="emailError">
Required: Please enter your email address
</div>
<div class="error" id="emailError2">
This doesn't look like a real email address, please check and reenter
</div>
<label for="FieldData2"><strong> E-mail
address * :</strong>
</label>
<div class="input">
<input type="text" name="FieldData1" id="FieldData2" value="" size="30" /><span class="message"></span>
</div>
<label for="comments"> <strong>Message * :</strong>
</label><span class="message"></span>
<div class="input">
<textarea name="Message" id="message" margin-left="20px"
margin-bottom="20px" rows="18" cols="40">
</textarea>
<input type="submit" value="Send Message" name="submit" >
</div>
</fieldset>
</form>
</div>
<div id="footer">
<p>Copyrights 2013 xxx xxx | Web Design by xxx</p>
</div>
</body>
</html>
This is my CSS:
#charset "UTF-8";
/* CSS Document */
html, body {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 14px;
background-image: url(../images/backgrd.jpg);
}
.hidden {
display: none;
}
#page-container {
width: 900px;
margin: auto;
}
#containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; left: 0; }
#main-nav {
margin-top: -142px;
height: 40px;
}
#navlist {
margin-left: 290px;
padding:0;
text-align: left;
}
#navlist ul, #navlist li {
margin: 0;
padding: 0;
color: #000000;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-weight:bold;
font-size: 16px;
display: inline;
list-style-type: none;
}
#navlist a:link, #navlist a:visited {
line-height: 20px;
margin: 0 10px 0 10px;
text-decoration: none;
color: #CDCDCD;
}
#navlist a:link#current, #navlist a:visited#current,
#navlist a:hover {
border-bottom: 3px solid #000000;
padding-bottom: 2px;
background: clear;
color: #000000;
}
#header {
height: 243px;
background: #CDCDCD;
}
#sidebar-a {
float: right;
width: 181px;
height: 441px;
}
#ftcredits {
text-align: left;
padding: 5px 0 5px 0;
font-family:Tahome, Arial, Helvetica, Sans-serif;
font-size: 11px;
color: #5d3b28;
}
#ftcredits a:link, a:visited {
color: #666633;
text-decoration: none;
}
#ftcredits a:hover {
color: #db6d16;
}
#content {
padding-left: 70px;
padding-right: 10px;
background: #CDCDCD;
overflow: hidden;
}
#footer {
font-family:Tahome, Arial, Helvetica, Sans-serif;
font-size: 11px;
color: #333333;
background: #CDCDCD;
padding: 1px 20px;
line-height: 13px;
border-top: 2px solid #5d3b28;
}
#footer a {
color: #003366;
text-decoration: underline;
}
#footer a:hover {
color: #003366;
}
h1 {color: #801F18;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 21px;
font-weight: bold;
text-align: center;
padding-bottom: 15px;
}
h2 {
color: #801F18;
font-size: 18px;
font-weight: bold;
text-align: center;
padding-bottom: 15px;
}
h5 {
font-size: 15px;
color: #663333;
line-height:150%
}
exc {
font-size: 17px;
color: #000000;
line-height:150%
}
p {
line-height:150%
}
h3 {
color: #666633;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 11px;
height: 350px;
margin-top: -350px;
margin-left: 460px;
}
hr {
width: 100%;
border-top: 2px solid #333333;
border-bottom: 0;
float: left;
line-height: 13px;
}
.double_column_list li {float:left; width:50%;
}
fieldset{ padding:10px;
width:600px;
}
label {width:170px;
float:left;
text-align:right;
clear:both;
margin-bottom:20px;
}
.input {width:350px;
float:left;
margin-left:10px;
}
error{
}
#content a {
color: #003366;
text-decoration: underline;
}
#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#content p {
margin: 0;
padding: 0;
line-height:150%;
padding-bottom: 15px;
}
.container1 {
display: inline;
float: left;
width: 320px;
height:200px;
padding: 10px;
margin-bottom: 20px;
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border: 1px solid #black;
zoom: 100%;
background-color: rgba(83,85,89,0.3);
}
.container2 {
width: 320px;
height:200px;
padding: 10px;
margin-left: 50px;
margin-bottom: 20px;
display: inline;
float: left;
/*-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border: 1px solid #black;
zoom: 100%;
background-color: rgba(83,85,89,0.3);*/
}
This is my JS:
function checkForm() {
hideAllErrors();
var formIsValid =
/*showErrorAndFocusIf('FieldData0', isEmpty, 'nameError')*/
/*&&*/ showErrorAndFocusIf('FieldData2', isEmpty, 'emailError');
showErrorAndFocusIf('FieldData2', isAnInvalidEmail, 'emailError2');
/*&& showErrorAndFocusIf('FieldData3', isEmpty, 'categoryError')*/
showErrorAndFocusIf('FieldData1', isEmpty, 'messageError');
/* For debugging, lets prevent the form from submitting. */
if (formIsValid) {
alert("Valid form!");
return false;
}
return formIsValid;
}
function showErrorAndFocusIf(fieldId, predicate, errorId) {
var field = document.getElementById(fieldId);
if (predicate(field)) {
document.getElementById(errorId).style.display = 'inline';
if (field.select) {
field.select();
}
field.focus();
return false;
}
return true;
}
function isEmpty(field) {
return field.value == '';
}
function isAnInvalidEmail(field) {
var email = field.value;
var ok = "1234567890qwertyuiop[]asdfghjklzxcvbnm.#-_QWERTYUIOPASDFGHJKLZXCVBNM";
for(i = 0; i < email.length; i++){
if(ok.indexOf(email.charAt(i)) < 0) {
return true;
}
}
re = /(#.*#)|(\.\.)|(^\.)|(^#)|(#$)|(\.$)|(#\.)/;
re_two = /^.+\#(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
return re.test(email) || !re_two.test(email);
}
function hideAllErrors() {
/*document.getElementById("nameError").style.display = "none"*/
document.getElementById("emailError").style.display = "none";
document.getElementById("emailError2").style.display = "none";
/*document.getElementById("categoryError").style.display = "none"*/
document.getElementById("messageError").style.display = "none";
}

A few points:
Your HTML is invalid, you should something like the W3C Validator to check your HTML.
You element names and ids are inconsistent. E.g. Your "Name" field is named "txtName" but has the id "name" and your "E-mail address" field is named "FieldData1" but has the id "FieldData2". Use consistent and sensible names so that the HTML and JavaScript are easy to write and understand.
You've broken the JavaScript by removing the AND operators (&&) in the checkForm function. The showErrorAndFocusIf function returns a boolean value that is true when the specified field is valid. The return values of the calls are supposed to be combined for all of the validation constraints to determine if the whole form has passed validation.
Lastly, the ids of the fields and error messages used in the JavaScript did not match the HTML. The JavaScript uses the DOM's getElementById function to retrieve references to the fields and the error messages in the HTML, so you have to make sure that the ids match in order for the code to work.
I've corrected these problems in a new JSBin: http://jsbin.com/otinoz/2/edit