Develop Reference

Add icon before form field

How can I add icons before the form fields?
This is how looks now:
And here how I want:
Here is css code (front.css):
body .qb-form {
width: auto;
height: auto;
}
#media (max-width: 660px) {
body .qb-form {
width: 100%;
}
}
body .qb-form h2 {
background: #3482C3;
padding: 15px 25px;
margin-bottom: 0;
color: white;
margin-top: 0;
}
body .qb-form .moreinfo {
background: #3482C3;
color: white;
padding: 0 25px 15px 25px;
margin-bottom: 15px;
}
body .qb-form label {
text-align: left;
font-size: 14px;
display: block;
padding-bottom: 0;
}
body .qb-form .qb-gdpr-label {
padding-bottom: 0;
}
body .qb-form .quickbuy_input {
height: 31px;
width: 190px;
border: 1px solid #ABADB3;
padding: 5px;
}
body .qb-form textarea {
width: 100%;
height: 60px;
border: 1px solid #abadb3;
}
body .qb-form .crow {
padding: 0 25px 25px 25px;
}
body .qb-form .buttons_wrp {
padding: 10px 25px 25px 25px;
}
body .qb-form .buttons_wrp .button {
padding: 10px 20px;
border: none;
border-radius: 4px;
text-transform: uppercase;
color: white;
background: #3482C3;
overflow: hidden;
}
body .qb-form .buttons_wrp .qb-btn-submit {
padding: 10px 20px 10px 62px;
background: #3482C3 url('../img/cart-icon.png') no-repeat 15px center;
}
body .qb-form .buttons_wrp .button:hover {
background-color: #388bd1;
}
body .qb-wrp .qb-btn span {
border-bottom: 1px dashed;
}
.product-simple .qb-btn {
background: none;
color: #1F679B;
font-size: 13px;
border-bottom: 1px dashed #1F679B;
padding: 0 0 1px 0;
}
body .qb-form sup {
color: red;
font-weight: bold;
}
body .qb-form .quickbuy_errors,
body .qb-form .quickbuy_success {
margin: 0 15px;
display: none;
padding: 10px;
line-height: 1.5;
}
body .qb-form .qb-product-name {
padding: 5px;
border: 1px dashed white;
font-weight: bold;
display: inline-block;
}
body .qb-form body .qb-form_loader {
position: relative;
top: -3px;
}
body .qb-form .qb-loader {
visibility: hidden;
}
body .qb-form .qb-loader.visible {
visibility: visible;
}
.qb-form .qb-gdpr-label .qb_gdpr_wrp {
float: left;
position: relative;
top: 3px;
margin-right: 10px;
}
.qb-form .qb-btn-close {
display: none;
}
.qb-form .qb-btn-close span {
font-size: 2rem;
line-height: 0;
display: inline-block;
vertical-align: middle;
margin-right: 0.5rem;
position: relative;
top: -1px;
border: none;
}
.qb-gdpr-label p:last-child {
margin-bottom: 0;
}
#media (max-width: 767px) {
.qb-wrap,
#product .qb-wrap {
flex-wrap: wrap;
}
}
And here is the hook.tpl:
<div class="crow">
<label for="quickbuy_name">{l s='Your name' mod='quickbuy'}:</label>
<input type="text" class="qb_name qb-input-field form-control" id="quickbuy_name" name="qb_customer_name" value="{$qb_name|escape:'html':'UTF-8'}" />
</div>
<div class="crow">
<label for="quickbuy_address">{l s='Your address' mod='quickbuy'}:</label>
<input type="text" class="qb_address qb-input-field form-control" id="quickbuy_address" name="qb_address" value="{$qb_address|escape:'html':'UTF-8'}" />
</div>
<div class="crow">
<label for="quickbuy_phone">{l s='Your phone number' mod='quickbuy'}: <sup>*</sup></label>
<input type="text" class="qb_phone qb-input-field form-control" id="quickbuy_phone" name="qb_phone" value="{$qb_phone|escape:'html':'UTF-8'}" />
</div>
{if $qb_gdpr}
<div class="crow">
<label class="qb-gdpr-label">
<span class="qb_gdpr_wrp">
<input type="checkbox" class="qb_gdpr" name="qb_gdpr">
</span>
{if $qb_gdpr_text}
{$qb_gdpr_text nofilter}{* HTML *}
{else}
{l s='I agree to processing of my personal data' mod='quickbuy'}
{if $qb_gdpr_link}(<a target="_blank" href="{$qb_gdpr_link|escape:'html':'UTF-8'}">{l s='read' mod='quickbuy'}</a>){/if}
{/if}
</label>
</div>
{/if}
<div class="crow quickbuy_errors error"></div>
<div class="crow quickbuy_success success"></div>
<div class="buttons_wrp">
<input type="hidden" name="qb_id_product" value="{$qb_product->id|intval}" />
<input type="hidden" name="qb_id_product_attribute" value="{$qb_product->id_product_attribute|intval}" />
<input type="hidden" name="qb_token" value="{$qb_token|escape:'html':'UTF-8'}" />
<input type="hidden" name="qb_action" value="submitQB" />
<input type="submit" class="qb-btn-submit btn btn-default button button-small" value="{l s='Buy' mod='quickbuy'}" />
<button class="qb-btn-close btn btn-default button button-small"><span>×</span> {l s='Close' mod='quickbuy'}</button>
<img class="qb-loader" src="/img/loader.gif" alt="{l s='Loading...' mod='quickbuy'}" />
</div>
</div>
</div>
</div>
I will be happy if anyone can help.
Thank you in advance.
Best regards

You can select the input fields from your HTML template by using their id's.
You you use icons8 to find the correct icons.
There you can get the Link (CDN) for each item by clicking on the download button and copy HTML.
You can paste the copied code in your HTML (just before the respective input field).
Afterwards you can style the respective item in your CSS file.
So that it has the same border and height as your input field.

Form validation check for empty string using red border around that particular field

I created a function if one of the field of the form is empty it will show red border around that field and show some error text related to that field. But when there is only one field empty it shows the error perfectly but border comes along in all other fields too. So, this is problem I want the border only to come for that empty field only
[this is the link to my code, here in this link you can I have filled three fields and last field is
empty and I want the red border to come for only this field not other fields][1]
[1]: https://jsfiddle.net/gurkiran/kf5m6bsa/

You can check this solution. I've changed your border function.
const form = document.querySelector("form");
const input = document.querySelectorAll("input");
form.addEventListener("submit",e =>{
e.preventDefault();
border();
const firstName = form.firstName.value.trim();
const lastName = form.lastName.value.trim();
const email = form.email.value.trim();
const password = form.password.value.trim();
const nameReg = /[a-zA-Z]{3,}/;
const emailReg =/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*/;
if (firstName === "" && lastName === "" && email === "" && password === ""){
first()
last()
mail()
pass()
} else if (lastName === "" && email === "" && password === ""){
last();
mail();
pass();
}else if ((email === "" || email === emailReg) && (password === "")){
mail();
pass();
}
else if (firstName === ""){
first()
} else if (lastName === ""){
last();
} else if (email === ""){
mail();
} else if (password === ""){
pass();
}else{
form.reset();
}
})
///First Name Text
const first = () =>{
form.firstName.placeholder = "";
}
// Last name Text
const last = () =>{
form.lastName.placeholder ="";
}
// Email
const mail = () =>{
form.email.placeholder = "email#example/com";
form.email.setAttribute("class","placeholder");
}
//Password Text
const pass = () =>{
form.password.placeholder ="";
}
/// Border for the input fields
const border = () =>{
input.forEach((field)=>{
let errorMsg = form.querySelector(`input[name="${field.name}"] ~ div.errorMessage`);
let errorImg = form.querySelector(`input[name="${field.name}"] ~ img[alt="error"]`);
if(field.value.trim().length <= 0) {
field.style.border ="2px solid hsl(0, 100%, 74%)";
errorMsg.style.display = 'block';
errorImg.style.display = 'initial';
} else {
field.style.border = '';
errorMsg.style.display = 'none';
errorImg.style.display = 'none';
}
}
)};
*,
*:focus,
*::before,
*::after {
margin: 0;
padding: 0;
outline: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-image: url(../images/bg-intro-desktop.png);
background-color: #ff7a7a;
font-family: 'Poppins', sans-serif;
height: 100%;
width: 100%;
}
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 33% 40%;
grid-template-columns: 33% 40%;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
}
.h2 {
color: white;
font-weight: bolder;
font-size: 3.2em;
}
.paragraph {
color: white;
font-size: 0.9em;
}
#firstH2 {
margin-bottom: -14px;
}
.box {
background-color: white;
border-radius: 10px;
text-align: center;
height: auto;
-webkit-box-shadow: 0px 9px rgba(0, 0, 0, 0.2);
box-shadow: 0px 9px rgba(0, 0, 0, 0.2);
}
.firstButton {
font-family: 'Poppins', sans-serif;
width: 100%;
border: 0;
color: white;
background-color: #6055a5;
font-size: 1.1em;
padding: 16px;
border-radius: 10px;
-webkit-box-shadow: 0px 9px rgba(0, 0, 0, 0.2);
box-shadow: 0px 9px rgba(0, 0, 0, 0.2);
font-weight: bolder;
}
.firstButton span {
font-size: 0.8em;
font-weight: normal;
}
input {
font-family: 'Poppins', sans-serif;
width: 90%;
padding: 15px;
font-size: 1em;
border: 1px solid #b9b6d3;
border-radius: 5px;
font-weight: 600;
color: #3e3c49;
}
input:focus {
font-family: 'Poppins', sans-serif;
font-size: 1em;
padding: 15px;
border: 1px solid black;
border-radius: 5px;
font-weight: 600;
color: #3e3c49;
}
input::-webkit-input-placeholder {
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
input:-ms-input-placeholder {
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
input::-ms-input-placeholder {
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
input::placeholder {
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
.placeholder::-webkit-input-placeholder {
color: #ff7a7a;
}
.placeholder:-ms-input-placeholder {
color: #ff7a7a;
}
.placeholder::-ms-input-placeholder {
color: #ff7a7a;
}
.placeholder::placeholder {
color: #ff7a7a;
}
#greenButton {
width: 90%;
border: 0;
padding: 16px;
background-color: #38cc8c;
border-radius: 10px;
-webkit-box-shadow: 0px 5px #26b577;
box-shadow: 0px 5px #26b577;
}
#greenButton span {
font-family: 'Poppins', sans-serif;
color: white;
font-size: 1.3em;
font-weight: bold;
}
#greenButton:hover {
cursor: pointer;
background-color: #52fab1;
}
.terms {
color: #b9b6d3;
font-size: 12px;
margin-top: 2%;
text-align: center;
}
.terms span a {
text-decoration: none;
color: #ff7a7a;
font-weight: bold;
}
form {
position: relative;
}
#firstImg {
display: none;
position: absolute;
top: 13%;
right: 9%;
}
#secondImg {
display: none;
position: absolute;
top: 29%;
right: 9%;
}
#thirdImg {
display: none;
position: absolute;
top: 45%;
right: 9%;
}
#fourthImg {
display: none;
position: absolute;
bottom: 33.5%;
right: 9%;
}
.errorMessage {
font-size: 0.8em;
color: #ff7a7a;
text-align: right;
font-style: italic;
font-weight: 500;
margin-right: 30px;
margin-top: -25px;
margin-bottom: 18px;
}
#firstName {
display: none;
}
#secondName {
display: none;
}
#third {
display: none;
}
#fourth {
display: none;
}
.attribution {
font-size: 11px;
text-align: center;
color: white;
}
.attribution a {
color: #3e52a3;
}
#media only screen and (max-width: 700px) {
body {
background-image: url(../images/bg-intro-mobile.png);
}
.grid {
-ms-grid-columns: 90%;
grid-template-columns: 90%;
}
.h2, .paragraph {
text-align: center;
}
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Intro component With Sign up Form</title>
</head>
<body>
<div class="container">
<div class="grid">
<!-- 1st grid -->
<div>
<br><br><br><br><br><br><br><br>
<h2 class="h2" id="firstH2">Learn to code by</h2>
<h2 class="h2">watching others</h2><br>
<p class="paragraph">See how experienced solve problems in real time. Watching scripted tutuorials is great, but
understanding how developers think is invaluable.</p>
</div>
<!-- 2nd grid -->
<div>
<div>
<br><br>
<button class="firstButton">Try it free 7 days <span>then $20/mo. thereafter</span></button>
<br><br>
<!-- box for white color -->
<div class="box">
<form>
<br><br>
<input type="text" name="firstName" placeholder="First Name"><br><br>
<img src="../images/icon-error.svg" id="firstImg" alt="error">
<div class="errorMessage" id="firstName">First Name cannot be empty</div>
<input type="text" name="lastName" placeholder="Last Name"><br><br>
<img src="../images/icon-error.svg" id="secondImg" alt="error">
<div class="errorMessage" id="secondName">Last Name cannot be empty</div>
<input type="email" name="email" placeholder="Email Address"><br><br>
<img src="../images/icon-error.svg" id="thirdImg" alt="error">
<div class="errorMessage" id="third">Looks like this is not an email</div>
<input type="password" name="password" placeholder="Password"><br><br>
<img src="../images/icon-error.svg" id="fourthImg" alt="error">
<div class="errorMessage" id="fourth">Password cannot be empty</div>
<button type="submit" id="greenButton"><span>CLAIM YOUR FREE TRIAL</span></button><br>
<div class="terms">
By clicking the button you are agreeing to our <span>Terms and Services</span>
</div><br><br>
</form>
</div>
</div>
</div>
</div>
</div>
<br><br>
<footer>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Gurkiran Singh.
</p>
</footer>
<script src="js/script.js"></script>
</body>
</html>

Generating Loops and Arrays from User Input and Printing Looped Output

I am editing an existing html file. I have to add a numeric entry field allowing users to indicate the number of volunteers they want to enter information for, and upon pressing enter in said field, generate additional input fields in the form below. Then when the form is submitted, the text on the bottom will replace the placeholders with the text entered in the form and repeated for as many volunteers were indicated in the first field.
I am new to javascript so there's still a lot of things I don't really understand but I am trying to learn. I have attempted referencing similar isolated examples of each action I need to perform but none of it really comes together or works properly for me. I understand that I should be using loop and array functions but can't really piece together how it all connects.
I have the code for the number field as well as the javascript for the text that will get replaced so far notated below:
function changeText() {
var recipient = document.getElementById('recipient').value;
document.getElementById('recipientName').innerHTML = recipient;
var organization = document.getElementById('organization').value;
document.getElementById('organizationName').innerHTML = organization;
var date = document.getElementById('date').value;
document.getElementById('eventDate').innerHTML = date;
var url = document.getElementById('url').value;
document.getElementById('websiteURL').innerHTML = url;
var host = document.getElementById('host').value;
document.getElementById('hostName').innerHTML = host;
return false;
}
body {
font: 15px arial, sans-serif;
color: #808080;
}
input[type=text],
select,
input[type=password],
radio {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #800D1E;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #802F1E;
}
section {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
article {
border-radius: 5px;
background-color: #CCCCCC;
padding: 20px;
color: #222222;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: #111;
}
ul.topnav li a.active {
background-color: #CCCCCC;
color: #333
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
.top {
position: relative;
background-color: #ffffff;
height: 68px;
padding-top: 20px;
line-height: 50px;
overflow: hidden;
z-index: 2;
}
.logo {
font-family: arial;
text-decoration: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 37px;
letter-spacing: 3px;
color: #555555;
display: block;
position: absolute;
top: 17px;
}
.logo .dotcom {
color: #800D1E
}
.topnav {
position: relative;
z-index: 2;
font-size: 17px;
background-color: #5f5f5f;
color: #f1f1f1;
width: 100%;
padding: 0;
letter-spacing: 1px;
}
.top .logo {
position: relative;
top: 0;
width: 100%;
text-align: left;
margin: auto
}
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
</head>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">Volunteers<span class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li>Home
</li>
<li>Invitation
</li>
<li>Gallery
</li>
<li>Registration
</li>
</ul>
</nav>
</header>
<br/>
<label for="volunteeramount">Number of Volunteers:</label>
<input type="number" name="volunteeramount" id="volunteers" placeholder="#" min="1" max="10">
<section id="pageForm">
<form action="#" onsubmit="return false;">
<br/>
<label for="recipientName">Recipient Name:</label>
<input type="text" name="recipientName" id="recipient" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization Name:
</label>
<input type="text" name="organizationName" id="organization" placeholder="Enter your Organization Name" />
<label for="eventDate">Event Date:
</label>
<input type="text" name="eventDate" id="date" placeholder="Enter your Event Date" />
<label for="websiteURL">URL:
</label>
<input type="text" name="websiteURL" id="url" placeholder="Enter your Website URL" />
<label for="hostName">Host Name:
</label>
<input type="text" name="hostName" id="host" placeholder="Host Name" />
<input type="submit" value="Submit" onclick="changeText()">
</form>
</section>
<article id="placeholderContent">
Hello <span id="recipientName">recipientName</span>!
<br/>
<br/> You have been invited to volunteer for an event held by <span id="organizationName">organizationName</span> on <span id="eventDate">eventDate</span>. Please come to the following website: <span id="websiteURL">websiteURL</span> to sign up as
a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id="hostName">hostName</span>
</article>
</body>
</html>
Any help would be appreciated in advance. I'm not sure if I should include any other information but please let me know if I do, I will try to provide what I can. Thank you.

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