JavaScript: FOR Loops, Validation

 

Intro to FOR Loops

A way of repeating a statement a given number of times is to use a FOR loop. Here is an example of a FOR loop:

for (i=0; i < 5; i++)
{ statement
  statement
  statement

}

In this FOR loop 'i=0' sets the variable 'i' equal to 0 as the FOR loop starts. The statement 'i < 5' states that the FOR loop will continue to run as long as 'i' is less than 5. The statement 'i++' increases 'i' by 1 each time the FOR loop runs. The statements between the opening '{' and the closing '}' execute each time the FOR loop runs. The variable 'i' is called the 'index' of the loop.

Here is a summary of how the FOR loop works:
'i' is set to 0. The statements inside the brackets execute.
'i' is increased to 1. The statements execute.
'i' is increased to 2. The statements execute.
'i' is increased to 3. The statements execute.
'i' is increased to 4. The statements execute.
'i' is increased to 5. Since 'i' is no longer less than 5, the statements do not execute and the FOR loop is done.


Example

Let's do an example that uses a FOR loop.

<BODY>
<script language=JavaScript>
<!--

name = prompt("What is your first name?","");
limit = prompt("How many times should your name be printed?","");

for (i=0; i<limit; i++)
{ document.write(name+"<br>");
}

//-->
</script>

to see this how this code behaves in a new window.

 

Forms and the 'This' Object

Sometimes it is desirable to send either a part of a form, or the whole form, to a function. An advantage of doing so is that the reference to the form in the function can be shorter. To send a part of a form to a function, you send the variable 'this' to the function. To quote The JavaScript Bible, "JavaScript features a keyword -- this -- that always refers to whatever object contains the script in which the keyword is used." For example, you might use this syntax to send the contents of a text box to the function 'checkBook':

<input type="text" value="Favorite Book?" onChange="checkBook(this)">

The start of the function 'checkBook()' might be:

function checkBook( book )
{ ...
}

To send the whole form to a function, send 'this.form'.

 

Form Validation

When you use a form on a website, you may want to check over or "validate" the form before it is sent to the server.

The function 'checkForm()' in the example below checks whether the user has selected 1 of the 4 seasons as her favorite. If she has not made a choice, an 'alert' box pops up, reminding her to choose a season. The function uses a FOR loop to do this check. The middle section of the FOR loop is 'i < form.season.length,' where 'season' is the name of the radio buttons for the 4 seasons. 'form.season.length' is 4 because 'season' has 4 radio buttons.

The statement 'form.season[i]' refers to an individual radio button. 'form.season[0]' refers to the first radio button, 'form.season[1]' refers to the second radio button, and so on. The statement 'form.season[0].checked' is true if the first radio button is checked; 'form.season[0].checked' is false if it is not checked. If any of the radio buttons has been checked by the viewer, filledOut is set to 'true.' If 'filledOut' is still false after the FOR loop runs, it follows that none of the radio buttons was checked by the user, and an 'alert' box pops up.

The whole form is sent to the function 'checkForm()' by using the 'this.form' syntax.

<head>
<script language=JavaScript>
<!--

function checkForm(form)
{

filledOut = false;

for(i=0; i < form.season.length; i++)

{

if (form.season[i].checked == true)

{    filledOut = true;

}

}

if( filledOut == false)

{    alert("Please fill out all fields.");

}

}
//-->
</script>
</HEAD>

<BODY>
<form>
<p>Favorite season:<br>
<input type=radio name="season" value="Winter">Winter<br>
<input type=radio name="season" value="Spring">Spring<br>
<input type=radio name="season" value="Summer" >Summer<br>
<input type=radio name="season" value="Fall">Fall
<P>
<input type=submit value="Submit" onClick = "checkForm(this.form)">
</form>

to see this how this code behaves in a new window. Try submitting the form without choosing a season.

 

Other Resources

Try these links on FOR loops and Form Validation:


Page Link
FOR Loops www.htmlgoodies.com/primers/jsp/article.php/3478371
Form Validation www.webdeveloper.com/javascript/javascript_form_verification.html

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on your own web page or eEverything.com.

If you work on eEverything.com, create a simple form with 3 text boxes, for the user's first name, last name and e-mail address. Then create a button labeled "Submit" or something similar. These are required fields, so if any of them is left blank, you want to prompt her to fill out all 3 fields. To do this, inside the <INPUT TYPE=BUTTON> tag, add an 'onClick' event handler, and call the function 'validate()' when the button is clicked. Send the entire form to the function by sending 'this.form' to it.

Every form has 'elements' associated with it, which are the text boxes, radio buttons, etc. in the form. In the example here, form.elements[0].value is what is stored in the first text box, form.elements[1].value is what's in the second text box, and form.elements[2].value is what's in the third text box.

Following the <SCRIPT LANGUAGE=JAVASCRIPT> tag in <HEAD>, declare a variable 'ok' and give it the value 'true'. In the function 'validate,' check each text box to see whether or not the user has entered any text into it . (A text box is blank if its contents are equal to "".) If there is no text in a box, set 'ok' to false. Finally, if 'ok' is false after you check all 3 text boxes, pop up an 'alert' box that asks her to fill in all 3 fields.

Extra Points:
Can you see how you might be able to access the contents of each text box in the form using a FOR loop?

Following the <SCRIPT LANGUAGE=JAVASCRIPT> tag in <HEAD>, declare a variable 'ok' and give it the value 'true'. Then, in the function 'validate()', set up a FOR loop with an index that goes from 0 to 2. Inside the FOR loop, check if text box #0, text box #1 or text box #2 are blank. If a text box is blank, set 'ok' to false -- information is missing. Finally, if 'ok' is false after the FOR loop is done, pop up an 'alert' box that asks her to fill in all 3 fields.