Hi! I posted my code below. Im having a problem in my js form validation. When i leave my first name empty it displays the message(in red) "first name must be filled out"(so far so good) .Next then when i type in something it gives me" valid input"(in green). The problem begins when i erase the first name and submit it again the "valid input" does not go away.(its like the code is only moving forward). Please Help!
The css is at the bottom.
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<html>
<head>
<link rel="script" href="js/index1.js">
<link rel="stylesheet" href="index1.css">
<script type="text/javascript">
function validator () {
var x = document.hello.textbox
var y = document.hello.lname
if (x.value.length == 0)
{
document.getElementById("fname").style.display="";
return false;
}
else
document.getElementById("greenvalid").style.display="";
return true;
}
</script>
<title>Form Validation.</title>
</head>
<body>
<div class="imagecard">
` <img src="index_card.png" width"450px" height="300px"/>
</div>
<div class="image">
` <img src="whoeei.png" />
</div>
<form name="hello">
<div class="fname">
First Name:     <input type="text" placeholder="John"name="textbox"/>3 to 10 Characters required<br>
<div id="fname" style="color:Red;display:none">First name must be filled out:</div>
<div id="threeormore" style="color:Red;display:none">First name must have 3 or more letters:</div>
<div id="greenvalid" style="color:green;display:none">Valid input:                                                     </div>
<div id="leastten1" style="color:Red;display:none">First name must have less than 10 letters:</div>
</div>
<div class="lname">
Last Name:     <input type="text" placeholder="smith" name="lname"/>3 to 10 Characters required<br>
<div id="llname" style="color:Red;display:none"> Last name must be filled out:</div>
<div id="threeormore2" style="color:Red;display:none">Last name must have 3 or more letters:</div>
<div id="leastten2" style="color:Red;display:none">Last name must have less than 10 letters:</div>
</div>
<div id="ffname" style="color:Red;display:none">Last Name must be filled out:</div>
<div class="email">
Email:             <input type="email" placeholder="
[email protected]" name="email"/>Required<br>
<div id="email" style="color:Red;display:none">Valid Email must be filled out:</div>
</div>
<div class="submit">
<input type="button" value="Submit" onClick="validator()">
</div>
</div>
</form>
</body>
</html>
css
html{
background-color:white;
}
.fname{
position: absolute;
top:56px;
left:20px;
}
.imgcard{
position:absolute;
}
.lname{
position: absolute;
top:107px;
left:20px;
}
.email{
position: absolute;
top:157px;
left:20px;
}
.submit{
position: absolute;
top:233px;
left:400px;
}
.image{
position:absolute;
top:50px;
left:400px;
}
#fname{
position:absolute;
top:130px;
left:20px;
background-color: white;
}
#greenvalid{
position:absolute;
top:130px;
left:20px;
background-color: white;
}
#llname{
position:absolute;
top:105px;
left:20px;
background-color: white;
}
#email{
position:absolute;
top:80px;
left:20px;
background-color: white;
}
#threeormore{
position:absolute;
top:130px;
left:20px;
background-color: white;
}
#threeormore2{
position:absolute;
top:105px;
left:20px;
background-color: white;
}
#leastten1{
position:absolute;
top:130px;
left:20px;
background-color: white;
}
#leastten2{
position:absolute;
top:105px;
left:20px;
background-color: white;
}
Stumble It!
Tweet This
Bookmark on Delicious
Share on Facebook
Share on MySpace