PDA

View Full Version : Form Validation



championcyclones
03-18-2012, 11:37 PM
Student looking for some help in validating a form I am working on...

Here is the forms.js file I have created that contains the validation functions that I can't seem to get working. Can't get the total cost to populate on a summary page either...


window.onload = init;

function init() {

document.forms[0].onsubmit = submitForm;

}

function calcCost(){

var cost = 145;
var guests = document.forms[0].guests.value;
cost = cost + (guests * 30);

if (document.forms[0].member.value == yes) {
cost = cost - 25;}
else cost;

document.forms[0].total.value = cost;

}

function testLength(field) {



if (field.value.length == 0) {
document.getElementById(field).style.backgroundColor = "yellow";
return false;
}

else {
document.getElementById(field).style.backgroundColor = "white";
return true;
}

}

function testPattern(field, reg) {

reg = /^\d{3,4}$/

if (field.value.length == reg) {
field.style.backgroundColor = "white";
field.style.color = "black";
return true;
}

else {
field.style.backgroundColor = "yellow";
field.style.color = "red";
return false;
}



}

function submitForm() {

var valid = true;

if(testLength(document.forms[0].fname)==false) valid=false;
if(testLength(document.forms[0].lname)==false) valid=false;
if(testLength(document.forms[0].address)==false) valid=false;
if(testLength(document.forms[0].email)==false) valid=false;

if ((form.member[0].checked||form.member[1].checked) == false) {
document.getElementById(member).style.backgroundColor = "yellow";
valid = false;
}
else {
valid = true;
}

if (valid = false) {
alert("Enter all required information in the appropriate format.");
}
else {
alert("You have entered all required information in the appropriate format.");
}

calcCost;


}

Any help would be appreciated...

keyboard
03-19-2012, 01:04 AM
I can see at least one problem with the code. Could you please post the html form which you are using this javascript with.

championcyclones
03-19-2012, 01:20 AM
Here is the form code...


<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 5
Case Problem 3

Conference Registration Form
Author: John E Sisler
Date: 03/16/12

Filename: conf.htm
Supporting files: back.jpg, conf.css, edge.jpg, forms.js, links.jpg, logo.jpg
-->

<title>Conference Registration Form</title>
<link href="conf.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="forms.js"></script>
</head>

<body>
<form id="reg" method="get" action="summary.htm">

<div id="links"><img src="links.jpg" alt="" /></div>
<div id="head"><img src="logo.jpg" alt="CGIP Annual Conference" /></div>
<div id="edge"><img src="edge.jpg" alt="" /></div>

<div id="main">
<p id="intro">
<b>10th Annual Conference of Computer Graphics and Image Processing</b><br />
University of Colorado, Boulder<br />
March 3 - March 7<br />
Conference Fee: $145
</p>
<h1>Conference Registration Form</h1>
<input type="hidden" id="total" name="total" />

<table>
<tr>
<td><span>*</span>First Name</td>
<td><input name="fname" id="fname" /></td>
<td style="text-align: right"><span>*</span>Last</td>
<td><input name="lname" id="lname" /></td>
</tr>
<tr>
<td id="add"><span>*</span>Address</td>
<td colspan="3"><textarea id="address" name="address" rows="" cols=""></textarea></td>
</tr>
<tr>
<td><span>*</span>E-mail</td>
<td colspan="3"><input name="email" id="email" /></td>
</tr>
<tr>
<td><span>*</span>Phone Number</td>
<td colspan="3">
<input id="phone1" name="phone1" size="3" />
<input id="phone2" name="phone2" size="3" /> -
<input id="phone3" name="phone3" size="4" />
</td>
</tr>
<tr>
<td colspan="3">Number attending banquet (add $30 per person)</td>
<td>
<select id="guests" name="guests">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</td>
</tr>
<tr>
<td colspan="3"><span>*</span>Member of ACGIP (save $25 on registration fee)</td>
<td>
<input type="radio" name="memberid" value="yes" /> Yes
<input type="radio" name="memberid" value="no" /> No
</td>
</tr>
</table>

<p><span>* Required Information</span></p>
<p style="text-align: center"><input id="sbutton" type="submit" value="continue" /></p>


</div>
</form>

</body>
</html>

I've made some modifications to the validation...here is the updated forms.js file...


/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 5
Case Problem 3

Author: John E Sisler
Date: 03/16/12

Filename: forms.js



Functions List:

init()
Initializes the onsubmit event handler for the form

calcCost()
Calculates the registration cost for the participant

testLength()
Tests the length of field. If the length is 0, change
the background color to yellow and return the value false;
otherwise leave the background color white and return the value
true

testPattern()
Tests a field to verify that it matches the regular expression
pattern. If the test fails, change
the background color to yellow and return the value false;
otherwise leave the background color white and return the value
true

submitForm
Validates a Web form by calling the testLength() and testPattern()
functions. If all tests are passed, run the calcCost() function
to calculate the registration cost; otherwise return the value
false.

*/

window.onload = init;

function init() {

document.forms[0].onsubmit = submitForm;

}

function calcCost(){

var cost = 145;
var guests = document.forms[0].guests.value;
cost = cost + (guests * 30);

if (document.forms[0].member.value == yes) {
cost = cost - 25;}
else cost;

document.forms[0].total.value = cost;

}

function testLength(field) {



if (field.value.length == 0) {
field.style.backgroundColor = "yellow";
return false;
}

else {
field.style.backgroundColor = "white";
return true;
}

}

function testPattern(field, reg) {

reg = /\d{3,4}/

if(field.value.length) {
field.style.backgroundColor = "white";
field.style.color = "black";
return true;
}

else {
field.style.backgroundColor = "yellow";
field.style.color = "red";
return false;
}



}


function submitForm() {

var valid = true;

if(testLength(document.forms[0].fname) == false) {
valid=false;}
if(testLength(document.forms[0].lname) == false) {
valid=false;}
if(testLength(document.forms[0].address) == false) {
valid=false;}
if(testLength(document.forms[0].email) == false) {
valid=false;
}
if(testPattern(document.forms[0].phone1) == false) {
valid=false;}
if(testPattern(document.forms[0].phone2) == false) {
valid=false;}
if(testPattern(document.forms[0].phone3) == false) {
valid=false;
alert("Enter all required information in the appropriate format.");
return valid;
}

if (document.forms[0].memberid[0].checked = false) {
memberid.style.backgroundColor = "yellow";
valid=false;
alert("Enter all required information in the appropriate format.");
return valid;
}

if (document.forms[0].memberid[1].checked = false) {
memberid.style.backgroundColor = "yellow";
valid=false;
alert("Enter all required information in the appropriate format.");
return valid;
}

if (valid == false) {
alert("Enter all required information in the appropriate format.");
}
else {
calcCost;
}

}

Nile
03-19-2012, 01:24 AM
What's the problem, more specifically, that you're encountering when trying to submit the form?

championcyclones
03-19-2012, 01:26 AM
I wasn't able to get the form to stop the submission when there were blank fields. I think I've got that corrected to some extent.

I still am not able to transfer the cost from the form to the summary page...not sure what's going on with that.

Nile
03-19-2012, 01:31 AM
Are you doing this for learning purposes? If yes, then to transfer the data from one page to the other, you can use javascript in an unreliable way and get the information filled out on the page before. However, if not, I suggest using something like PHP to get that information.

championcyclones
03-19-2012, 01:32 AM
Strictly learning purposes..

Nile
03-19-2012, 01:42 AM
Okay, in that case you can use javascript and the "get" method on your form. The get method submits information through the url in this format:


http://blah.com/?name=value&name1=value1

Where the ? separates the URL from the query, and the & separates each variable.

So to make a function to get the information stored in the URL, use window.location.search to get the query. After which, you'll be left with "?name=value&name1=value1". I'd suggest getting rid of the '?' using something like substring, then splitting each individual variable using something like the split function. After that, you can make a for loop to run through the output of the split() and put all the information inside another array, possible called get.

I can show you code if you want, but since it's for learning, I'd figure I'd guide you there first.

championcyclones
03-19-2012, 01:45 AM
can you tell me why the calcCost function doesn't return the cost to the hidden field 'total'?

Nile
03-19-2012, 01:50 AM
Oh :o. Sorry, I didn't realize that's what you wanted.

You have to give the <select> an onchange event of "calcCost()" or else the function won't run.

In addition, change your if statement to this:


if (document.forms[0].memberid.value == 'yes') {
cost = cost - 25;
} //no: else cost;

championcyclones
03-19-2012, 09:19 AM
resolved...thanks everyone!

Nile
03-19-2012, 11:30 AM
No problem, I'm glad to help :D

In an effort to keep things organized, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"