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

Code:

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

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

Code:

/*
   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:

Code:

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

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

Code:

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

Thread: Form Validation

Thread Tools

Search Thread

Form Validation

The Following User Says Thank You to Nile For This Useful Post:

The Following User Says Thank You to Nile For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions