What have i done wrong??

Printable View

11-15-2012, 02:01 PM
ianruk

What have i done wrong??

Hi i am doing a form validation using javascript (not jquery) just plain javascript and i can not get this to work i shall paste my html and javascript code below if anyone can get this working for me it would be great

(HTML)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Validation</title>
<link href="formlayout.css" rel="stylesheet" type="text/css"></link>

<script type="text/javascript" src="formjs.js"></script>
</head>

<body>
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="file:///C|/Users/ian/Desktop/index.html">
<h1>Sign-up form</h1>
<p>Please Complete All Fields</p>

<label>Name
<span class="small">Add your name</span>
</label>
<input type="text" name="name" id="name" />

<label>Address
<span class="small">Enter Address</span>
</label>
<input type="text" name="add1" id="add1" />

<label>City
<span class="small">Add your City</span>
</label>
<input type="text" name="city" id="city" />

<label>PostCode
<span class="small">Add your Postcode</span>
</label>
<input type="text" name="pcode" id="pcode" />

<label>Phone Number
<span class="small">Add your Phone Number</span>
</label>
<input type="text" name="pnum" id="pnum" />

<label>Email
<span class="small">Add A Valid Email</span>
</label>
<input type="text" name="email" id="email" />

<label>Confirm Email
<span class="small">Retype Email</span>
</label>
<input type="text" name="conemail" id="conemail" />

<label>Password
<span class="small">Min. size 6 chars</span>
</label>
<input type="text" name="password" id="password" />

<label>Confirm Password
<span class="small">Min. size 6 chars</span>
</label>
<input type="text" name="conpassword" id="conpassword" />

<input type="button" value="Submit Details" onclick="Confirm()"/>
<div class="spacer"></div>

</form>
</div>
</body>
</html>

(JavaScript)

// JavaScript Document

function validate() {
var name = document.getElementById('name').value;
var address = document.getElementById('add1').value;
var city = document.getElementById('city').value;
var postcode = document.getElementById('pcode').value;
var phonenum = document.getElementById('pnum').value;
var email = document.getElementById('email').value;
var conemail = document.getElementById('conemail').value;
var pword = document.getElementById('password').value;
var conpword = document.getElementById('conpassword').value;

if (name==""){
document.getElementById("name").style.backgroundColor = "red";
document.getElementById("name").innerHTML = "You havent entered a Name"
errorCount = errorCount + 1;

if (add1==""){
document.getElementById("add1").style.backgroundColor = "red";
document.getElementById("add1").innerHTML = "You havent entered a Address"
errorCount = errorCount + 1;

if (city==""){
document.getElementById("city").style.backgroundColor = "red";
document.getElementById("city").innerHTML = "You havent entered a City"
errorCount = errorCount + 1;

if (pcode<6){
document.getElementById("pcode").style.backgroundColor = "red";
document.getElementById("pcode").innerHTML = "You havent entered a vaild Postcode"
errorCount = errorCount + 1;

if (pnum<11){
document.getElementById("pnum").style.backgroundColor = "red";
document.getElementById("pnum").innerHTML = "You havent entered a vaild Phone Number"
errorCount = errorCount + 1;

if (email.indexOf("@")==-1){
document.getElementById("Email").innerHTML = "You havent entered a vaild email"
errorCount = errorCount + 1;

if (pword==""){
document.getElementById("pword").style.backgroundColor = "red";
document.getElementById("pword").innerHTML = "You havent entered a Password"
errorCount = errorCount + 1;

}
}
}
}
}
}
}
}

function checkemail() {
if(email.value == conemail.value){
document.getElementById("conemail").innerHTML = "emails dont match"
}
}

function checkpass(){
if(pword.value == conpword.value){
document.getElementById("conemail").innerHTML = "passwords dont match"
}
}
11-16-2012, 10:58 AM
coldfire421

As I have read your code, on you "Submit Details" button it says that it will call a Confirm function but I cannot see any confirm function in your javascript code
11-16-2012, 11:03 AM
coldfire421

Also you have too many incorrect syntax on your code, your "IF" statement are suppose to be a block statement
example

if(x > n){
// code here
}

if(y > x){
// code here
}

what you did is put opening curly braces in all "IF" statement and no close curly bracket at all then you put all close bracket at once after your last "IF" statement
11-16-2012, 11:08 AM
coldfire421

Another things is you have 2 functions named "checkemail" and "checkpass" and you put it inside your function "validate" and I have notice that you that 2 function is never been used
11-16-2012, 11:14 AM
coldfire421

Also this statement...
document.getElementById("name").innerHTML = "You havent entered a Name"

The text input has no innerHTML property. You can assign value to the text input using its value property, just like how you get the value of "name" variable from your text input "name"

This is the right...

document.getElementById('name').value = "You havent entered a Name";

and another things it is a good practice to declare the variable before you are going to use it. You have to declare the errorCount as zero before you append some value of it
11-16-2012, 02:21 PM
ianruk

Thank you so much for your help. i have changed some of the code as advised just making sure this is correct so here is my new code

(HTML)

<title>Form Validation</title>
<link href="formlayout.css" rel="stylesheet" type="text/css"></link>

<script type="text/javascript" src="formjs.js"></script>
</head>

<body>
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="submitted.html">
<h1>Sign-up form</h1>
<p>Please Complete All Fields</p>

<label>Name
<span class="small">Add your name</span>
</label>
<input type="text" name="name" id="name" />

<label>Address
<span class="small">Enter Address</span>
</label>
<input type="text" name="add1" id="add1" />

<label>City
<span class="small">Add your City</span>
</label>
<input type="text" name="city" id="city" />

<label>PostCode
<span class="small">Add your Postcode</span>
</label>
<input type="text" name="pcode" id="pcode" />

<label>Phone Number
<span class="small">Add your Phone Number</span>
</label>
<input type="text" name="pnum" id="pnum" />

<label>Email
<span class="small">Add A Valid Email</span>
</label>
<input type="text" name="email" id="email" />

<label>Confirm Email
<span class="small">Retype Email</span>
</label>
<input type="text" name="conemail" id="conemail" />

<label>Password
<span class="small">Min. size 6 chars</span>
</label>
<input type="text" name="password" id="password" />

<label>Confirm Password
<span class="small">Min. size 6 chars</span>
</label>
<input type="text" name="conpassword" id="conpassword" />

</form>

<input type="button" value="Submit Details" onclick="validate()"/>
<div class="spacer"></div>

</div>
</body>
</html>

(javascript)

function validate() {
var name = document.getElementById('name').value;
var address = document.getElementById('add1').value;
var city = document.getElementById('city').value;
var postcode = document.getElementById('pcode').value;
var phonenum = document.getElementById('pnum').value;
var email = document.getElementById('email').value;
var conemail = document.getElementById('conemail').value;
var pword = document.getElementById('password').value;
var conpword = document.getElementById('conpassword').value;

if (name==""){
document.getElementById("name").style.backgroundColor = "red";
document.getElementById('name').value = "You havent entered a Name";
errorCount = errorCount + 1;
}
if (address==""){
document.getElementById("add1").style.backgroundColor = "red";
document.getElementById("add1").value = "You havent entered a address";
errorCount = errorCount + 1;
}
if (city==""){
document.getElementById("city").style.backgroundColor = "red";
document.getElementById("city").value = "You havent entered a city";
errorCount = errorCount + 1;
}
if (postcode.length<6){
document.getElementById("pcode").style.backgroundColor = "red";
document.getElementById("pcode").value = "You havent entered a valid postcode";
errorCount = errorCount + 1;
}
if (phonenum.length<11){
document.getElementById("pnum").style.backgroundColor = "red";
document.getElementById("pnum").value = "You havent entered a valid phone number";
errorCount = errorCount + 1;
}
if (email.indexOf("@")==-1){
document.getElementById("Email").value = "You havent entered a valid email";
errorCount = errorCount + 1;
}
if(email.value == conemail.value){
document.getElementById("conemail").value = "your emails dont match";
errorCount = errorCount + 1;
}
if (pword==""){
document.getElementById("pword").style.backgroundColor = "red";
document.getElementById("pword").value = "You havent entered a password";
errorCount = errorCount + 1;

}
if(pword.value == conpword.value){
document.getElementById("conemail").value = "passwords dont match";
errorCount = errorCount + 1;

}

}

so i have a few more questions and i am so sorry for any bother i have caused. so my questions are:

1. how do i set the error count,so where n how would i set it to 0 and how would i make it work

2. the .value to bring up a message telling users they have either not entered the right info instead of having it displayed in the box is there a way to have it next to the box? or underneath the box?

3. how do i make all the errors come up onto the page at the same time? is that the error count?

4. last question the whole email and password dont match is that the right code?, also if i wanted the password and phone number to be a certain length is the code...

phonenum.length<11 correct? cause it doesnt seem to work

please if possible could you finish off and add anything else i am missing

thank you so much for your patience and help
11-20-2012, 11:45 AM
coldfire421

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Form Validation</title>
<style type="text/css">
body{
font-family: Arial, Tahoma, Verdana;
font-size: 11px;
}
.errMsg{
color: #ff0000;
}
</style>
<script type="text/javascript">
var spanArray = null;
var form = null;

function validate(){
var errorCount = 0;

spanArray = document.getElementsByTagName('span');
labelArray = document.getElementsByTagName('label');

form = document.getElementById("frmUserInfo");
clearErrMsg();

for(i = 0; i < form.length; i++){
if(form.elements[i].value == ""){
spanArray[i].innerHTML = "You havent entered a " + labelArray[i].innerText;
errorCount++;
}else{
switch(i){
case 4:
if(form.elements[i].value.length > 9){
spanArray[i].innerHTML = "Invalid Phone Number";
errorCount++;
}
break;
case 5:
case 6:
if(checkEmail(form.elements[i].value)){
if(i == 6){
if(form.elements["email"].value != form.elements["conemail"].value){
spanArray[i].innerHTML = "Email don't match";
errorCount++;
}
}
}else{
spanArray[i].innerHTML = "Invalid Email";
errorCount++;
}
break;
case 8:
if(!checkPassword()){
spanArray[i].innerHTML = "Password don't match";
errorCount++;
}
break;
}
}
}
document.getElementById("totalError").innerHTML = "";
if(errorCount > 0){
document.getElementById("totalError").innerHTML = "<b>Total number of errors: " + errorCount + "</b>";
}else{
// uncomment to submit form here
// document.frmUserInfo.submit();
alert("Validation success");
}
}

function checkEmail(email){
if(email.indexOf("@") == -1){
return false;
}
return true;
}

function checkPassword(){
if(form.elements["password"].value == form.elements["conpassword"].value){
return true;
}
return false;
}

function clearErrMsg(){
for(i = 0; i < spanArray.length; i++){
spanArray[i].innerHTML = "";
}
}
</script>
</head>
<body>

<form name="frmUserInfo" id="frmUserInfo" method="post">
<label>Name</label>:<br />
<input type="text" name="name" /><br />
<span class="errMsg"></span><p />

<label>Address</label>:<br />
<input type="text" name="address" /><br />
<span class="errMsg"></span><p />

<label>City</label>:<br />
<input type="city" name="address" /><br />
<span class="errMsg"></span><p />

<label>PostCode</label>:<br />
<input type="text" name="pcode" /><br />
<span class="errMsg"></span><p />

<label>Phone Number</label>:<br />
<input type="text" name="pnum" /><br />
<span class="errMsg"></span><p />

<label>Email</label>:<br />
<input type="text" name="email" /><br />
<span class="errMsg"></span><p />

<label>Retype Email</label>:<br />
<input type="text" name="conemail" /><br />
<span class="errMsg"></span><p />

<label>Password</label>:<br />
<input type="text" name="password" /><br />
<span class="errMsg"></span><p />

<label>Confirm Password</label>:<br />
<input type="text" name="conpassword" /><br />
<span class="errMsg"></span><p />
</form>
<input type="button" value="Submit Details" onclick="validate()" /><p />
<div id="totalError"></div>
</body>
</html>