Personal computing discussed

Moderators: SecretSquirrel, just brew it!

 
Trellot
Gerbil Team Leader
Topic Author
Posts: 298
Joined: Sat Dec 18, 2004 1:01 am
Location: California

Testing string lengths in JavaScript

Fri Apr 03, 2009 1:46 pm

Hi everyone,

With my current function, testLength(field), I am trying to test whether the user has entered any text in a required field. This function has the single parameter, "field", which should represent the field object to be tested. My function should do this:

1. Test whether the length of the field value is equal to 0.
2. If the length is equal to 0, then: 1)Change the background color of the field object to yellow and 2) return the Boolean value false. Otherwise: 1) Change the background color of the field object to white and 2) return the Boolean value true.

Here's what I've come up with currently:
function testLength(field){
  if (field.length == 0){
    document.reg.elements["field"].style.backgroundcolor = "yellow"; 
    return false;
    }else{
      document.reg.elements["field"].style.backgroundcolor = "white";  // getting null or not an object error here.
      return true;
    }
  }

The web page I'm using:
<html>
<head>
<title>Conference Registration Form</title>
<link href="conf.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function calcCost(){
  var cost = 145;
  var sindex = document.reg.guests.selectedIndex.value;
  var addindex = sindex*30;
  cost += addindex;
  if (document.reg.member[0].checked){
    cost-25;
    document.reg.total.value = cost;
    }
}
function testLength(field){
  if (field.length == 0){
    document.reg.elements["field"].style.backgroundcolor = "yellow";
    return false;
    }else{
      document.reg.elements["field"].style.backgroundcolor = "white";
      return true;
    }
  }
function testPattern(field,reg){
  if (field.value.test(reg)){
    document.reg.elements[field].style.backgroundcolor = "white";
    document.reg.elements[field].style.color = "black";
    return true;
    }else{
      document.reg.elements[field].style.backgroundcolor = "yellow";
      document.reg.elements[field].style.color = "red";
      return false;
    }
}
function submitForm(){
  valid = true;
  oform=document.reg;
  fname=oform.elements["fname"];
  lname=oform.elements["lname"];
  address=oform.elements["address"];
  email=oform.elements["email"];

  testLength(fname);
  if (testLength(fname) == false)
    valid = false;
  testLength(lname);
  if (testLength(lname) == false)
    valid = false;
  testLength(address);
  if (testLength(address) == false)
    valid = false;
  testLength(email);
  if (testLength(email) == false)
    valid = false;

  testPattern("phone1",/^\d\d\d$/);
    if (false)
      valid = false;
  testPattern("phone2",/^\d\d\d$/);
    if (false)
      valid = false;
  testPattern("phone3",/^\d\d\d\d$/);
    if (false);
      valid = false;

  if (document.reg.member[0].checked || document.reg.member[1].checked == false){
    document.reg.member[0].style.backgroundcolor = "yellow";
    document.reg.member[1].style.backgroundcolor = "yellow";
    valid = false;
    }
      if (valid.value == false){
        alert("Enter all required information in the appropriate format");
        }else{
        calcCost();
        }
        return valid.value;
}
</script>
</head>

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

<form id="reg" name="reg" method="get" action="summary.htm" onsubmit="return submitForm()">
<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"></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="member" value="yes" /> Yes
       <input type="radio" name="member" 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>
</form>

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

Parameters that are supposed to represent the particular fields, checkboxes, selection lists, etc. really confuses me as to how to reference them. What am I doing wrong here?

Trellot
-ASRock Z68 Extreme3 Gen3 LGA 1155 Intel Z68 / Intel Core i5-2500K
-XFX Radeon HD 7970 3072MB, GDDR5, PCI-Express 3.0
-Corsair Enthusiast Series TX850 V2 PSU / Corsair 600T case
-G.SKILL Ripjaws X Series 16GB / Hitachi Deskstar 750GB
 
titan
Grand Gerbil Poohbah
Posts: 3314
Joined: Mon Feb 18, 2002 7:00 pm
Location: Great Smoky Mountains
Contact:

Re: Testing string lengths in JavaScript

Sat Apr 04, 2009 3:30 pm

Rather than testing for length, you should be running your function on change because that will tell you if the user put anything in the field. You can then parse it with a regex to make sure only the allowed charaters are entered. (The regex in the script is only for UI purposes, it will not protect you from bad input.)
The best things in life are free.
http://www.gentoo.org
Guy 1: Surely, you will fold with me.
Guy 2: Alright, but don't call me Shirley.
 
Trellot
Gerbil Team Leader
Topic Author
Posts: 298
Joined: Sat Dec 18, 2004 1:01 am
Location: California

Re: Testing string lengths in JavaScript

Sun Apr 05, 2009 2:18 pm

I'm restricted to the course material at this time, unfortunately. I've made some changes to the function, but am still getting errors with it. Is this any closer to what I want, however?
function testLength(field){
  if (field.length == 0){
    field.style.backgroundColor = "yellow";  // getting "style" null or not an object here
    return false;
    }else{
    field.style.backgroundColor = "white";
      return true;
    }
  }


Trellot
-ASRock Z68 Extreme3 Gen3 LGA 1155 Intel Z68 / Intel Core i5-2500K
-XFX Radeon HD 7970 3072MB, GDDR5, PCI-Express 3.0
-Corsair Enthusiast Series TX850 V2 PSU / Corsair 600T case
-G.SKILL Ripjaws X Series 16GB / Hitachi Deskstar 750GB
 
morphine
Silver subscriber
Gerbilus Supremus
Posts: 11154
Joined: Fri Dec 27, 2002 8:51 pm
Location: Portugal (that's next to Spain)

Re: Testing string lengths in JavaScript

Fri Apr 10, 2009 8:20 pm

What errors are you getting, specifically?
There is a fixed amount of intelligence on the planet, and the population keeps growing :(
 
steelcity_ballin
Gerbilus Supremus
Posts: 11971
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: Testing string lengths in JavaScript

Fri Apr 10, 2009 9:39 pm

In javascript, you can not simply refer to the element by it's name or ID (well, not without a framework), you need to access it through the DOM. Try using this:

document.getElementById(field).style.backgroundColor = "yellow";
Corsair 600T | ASUS P8P67 PRO | Intel 2500k @ 4.4Ghz | Asus 970GTX | G.SKILL Ripjaws Series 8GB | Corsair HX650 650W | Asus ROG Swift Gsync 27"

Who is online

Users browsing this forum: No registered users and 1 guest