Testing string lengths in JavaScript

From Visual Basic to GNU C, this is the place to talk programming.

Moderators: SecretSquirrel, just brew it!

Testing string lengths in JavaScript

Postposted on 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:
Code: Select all
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:
Code: Select all
<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
Trellot
Gerbil Team Leader
 
Posts: 298
Joined: Sat Dec 18, 2004 1:01 am
Location: California

Re: Testing string lengths in JavaScript

Postposted on 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.
titan
Grand Gerbil Poohbah
 
Posts: 3276
Joined: Mon Feb 18, 2002 7:00 pm
Location: Great Smoky Mountains

Re: Testing string lengths in JavaScript

Postposted on 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?
Code: Select all
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
Trellot
Gerbil Team Leader
 
Posts: 298
Joined: Sat Dec 18, 2004 1:01 am
Location: California

Re: Testing string lengths in JavaScript

Postposted on 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 :(
morphine
Grand Admiral Gerbil
Silver subscriber
 
 
Posts: 10092
Joined: Fri Dec 27, 2002 8:51 pm
Location: Portugal (that's next to Spain)

Re: Testing string lengths in JavaScript

Postposted on 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:

Code: Select all
document.getElementById(field).style.backgroundColor = "yellow";
Corsair 600T | ASUS P8P67 PRO | Intel 2500k @ 4.4Ghz | EVGA 560 TI | G.SKILL Ripjaws Series 8GB | Corsair HX650 650W
steelcity_ballin
Gerbilus Supremus
Silver subscriber
 
 
Posts: 11924
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA


Return to Developer's Den

Who is online

Users browsing this forum: No registered users and 1 guest