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.

Function slideToggle not detecting the previous open/close state of the div script only javascript

Function slideToggle not detecting the previous open/close state of the div script only javascript because in jquery no problem but I only want javascript.
When I click on the second button the div opens and this closes right away as the script does not include detect the state I think but I do not see how to modify the javascript script to prevent the bug.
I want each button to open and close its own div.
current result :
https://jsfiddle.net/vincent1890/5fje4zwv/2/
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css.css">
<!-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
<style type="text/css">
/* Just to play with animations */
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
font-size: 0.835em;
text-transform: uppercase;
letter-spacing: 0.125em;
font-weight: bold;
}
/* Some Generic styles */
body {
text-align: center;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
color: #444;
line-height: 1.6;
}
/* CSS styles "+ OPTIONS ..." */
.bouton-deplier {
text-decoration: none;
color: #fff;
background: #000;
padding: 5px 10px;
cursor: pointer;
}
.montexte {
padding: 10px 10px 20px 10px;
}
#mdiv {
height: 0px;
margin-top: 0px;
border-radius: 0px;
font-weight: bold;
text-align: center;
overflow-y: hidden;
background-color: #ef1;
margin-bottom: 0em;
color: rgba(0, 0, 0, .65);
}
#mdiv2 {
height: 0px;
margin-top: 0px;
border-radius: 0px;
font-weight: bold;
text-align: center;
overflow-y: hidden;
background-color: #ef1;
margin-bottom: 0em;
color: rgba(0, 0, 0, .65);
}
</style>
</head>
<body onload="chg_item()">
<div class="header" id="myHeader" >
<button class="bouton-deplier" id="mbtn" onclick="slideToggle('mdiv', 50);">+ Options autres</button>
<button class="bouton-deplier" id="mbtn2" onclick="slideToggle('mdiv2', 100);">+ Optionnel (Telephonie Audioconf)</button>
<div id="mdiv">
<div class="montexte">
<label for="UidText">Uid (User):</label>
<input type="text" id="ChoisirUid" onfocus="this.value=''" onchange="chg_item()">
</div>
</div>
<div id="mdiv2">
<div class="montexte">
<label for="TelNumberText">Num Tel (User):</label>
<input type="text" id="ChoisirTelNumber" onfocus="this.value=''" onchange="chg_item()">
<br>
<label for="NomPrenomText">Nom Prenom :</label>
<input type="text" id="ChoisirNomPrenom" onfocus="this.value=''" onchange="chg_item()">
</div>
</div>
</div>
</body>
<script>
var slideOpen = false;
//var heightChecked = false;
var initHeight = 60;
var intval = null;
function slideToggle(NameDiv, Height) {
var initHeight = Height;
window.clearInterval(intval);
var NameDiv = document.getElementById(NameDiv);
/*
if(!heightChecked) {
initHeight = NameDiv.offsetHeight;
heightChecked = true;
}
*/
if(slideOpen) {
var h = initHeight;
slideOpen = false;
intval = setInterval(function(){
h--;
NameDiv.style.height = h + 'px';
if(h <= 0)
window.clearInterval(intval);
}, 1
);
}
else {
var h = 0;
slideOpen = true;
intval = setInterval(function(){
h++;
NameDiv.style.height = h + 'px';
if(h >= initHeight)
window.clearInterval(intval);
}, 1
);
}
}
</script>
</html>

HTML
<div class="container">
<button id="btn1" class="btn" onclick="clickHandler('first')">First tab</button>
<button id="btn2" class="btn" onclick="clickHandler('second')">Second tab</button>
<div id="first" class="data hidden">Hello</div>
<div id="second" class="data hidden">World!</div>
</div>
JavaScript
function clickHandler(id) {
toggle("data");
const div = document.getElementById(id);
div.classList.add("shown");
div.classList.remove("hidden");
}
function toggle(className) {
const elements = document.getElementsByClassName(className);
for (let i = 0; i < elements.length; i++) {
const elm = elements[i];
if (elm.classList.contains("shown")) {
elm.classList.remove("shown")
elm.classList.add("hidden")
}
}
}
This handler changes every element currently shown to hidden, then executes the clickHandler and shows the button only which was clicked.
You can add more css to this for better visuals.
Check out this JSFiddle

You can do like this with jquery
$(".bouton-deplier").click(function() {
var btnID = $(this).attr('id');
if ($(".textContent:visible").is(':visible')) {
$(".textContent:visible").slideUp(0, function() {
$("." + btnID + ".textContent").slideDown("slow");
});
} else {
$("." + btnID + ".textContent").slideDown("slow");
}
});
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
font-size: 0.835em;
text-transform: uppercase;
letter-spacing: 0.125em;
font-weight: bold;
}
/* Some Generic styles */
body {
text-align: center;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
color: #444;
line-height: 1.6;
}
/* CSS styles "+ OPTIONS ..." */
.bouton-deplier {
text-decoration: none;
color: #fff;
background: #000;
padding: 5px 10px;
cursor: pointer;
}
.montexte {
padding: 10px 10px 20px 10px;
}
.mbtn {
display:none;
height: 60px;
margin-top: 0px;
border-radius: 0px;
font-weight: bold;
text-align: center;
overflow-y: hidden;
background-color: #ef1;
margin-bottom: 0em;
color: rgba(0, 0, 0, .65);
}
.mbtn2 {
display:none;
height: 60px;
margin-top: 0px;
border-radius: 0px;
font-weight: bold;
text-align: center;
overflow-y: hidden;
background-color: #ef1;
margin-bottom: 0em;
color: rgba(0, 0, 0, .65);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header" id="myHeader" >
<button class="bouton-deplier" id="mbtn">+ Options autres</button>
<button class="bouton-deplier" id="mbtn2">+ Optionnel (Telephonie Audioconf)</button>
<div class="mbtn textContent">
<div class="montexte">
<label for="UidText">Uid (User):</label>
<input type="text" id="ChoisirUid" onfocus="this.value=''" onchange="chg_item()">
</div>
</div>
<div class="mbtn2 textContent">
<div class="montexte">
<label for="TelNumberText">Num Tel (User):</label>
<input type="text" id="ChoisirTelNumber" onfocus="this.value=''" onchange="chg_item()">
<br>
<label for="NomPrenomText">Nom Prenom :</label>
<input type="text" id="ChoisirNomPrenom" onfocus="this.value=''" onchange="chg_item()">
</div>
</div>
</div>

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>

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).

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