*Enter your first name:
Enter your middle initial:
*Enter your last name:
Enter your street address:
Enter your city:
Enter your state:
*Enter your email address:



* indicates required fields.
Here's the script:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 <html> <head> <title>Required Fields - Focus Example</title> <script language="JavaScript"> <!-- function checkRequiredEntries(form) { var marker = 0; for (var i = 0; i < form.elements.length; i++) { if (form.elements[i].name.substring(0,3) == "req") { if (form.elements[i].value == "") { marker = 1; alert("You have not filled out all the required fields"); form.elements[i].focus(); break; } } } if (!marker) { alert("The form would normally be submitted at this point. All required fields have entries."); } return false; } //--> </script> </head> <body> <form onSubmit="return checkRequiredEntries(this)"> <table border="0" cellspacing="7" cellpadding="0" bgcolor="gold"> <tr> <td align="right"><font color="#ff0000">*</font>Enter your first name:</td> <td><input type="text" name="req_First"></td> </tr> <tr> <td align="right">Enter your middle initial:</td> <td><input type="text" name="midInitial"></td> </tr> <tr> <td align="right"><font color="#ff0000">*</font>Enter your last name:</td> <td><input type="text" name="req_Last"></td> </tr> <tr> <td align="right">Enter your street address:</td> <td><input type="text" name="address"></td> </tr> <tr> <td align="right">Enter your city:</td> <td><input type="text" name="city"></td> </tr> <tr> <td align="right">Enter your state:</td> <td><input type="text" name="state"></td> </tr> <tr> <td align="right"><font color="#ff0000">*</font>Enter your email address:</td> <td><input type="text" name="req_email"></td> </tr> </table> <br /> <input type="submit" value="submit"> <br /><br /> <b><font color="#ff0000">*</font> indicates required fields.</b> </form> </body> </html>
The JavaScript on this page does only one thing: it checks whether all required fields have been filled out.  It does not check whether the values entered into the fields make any sense or match a known template.Upon submission of the form, the method checkRequiredEntries() (line 33) is called.  This method receives one argument:  the form that called it.  It runs through each element of the form, using the elements[i] array property of the form object in a for loop (line 11).

Inside the for loop, the script first checks whether the current element name starts with "req" at line 12:
if (form.elements[i].name.substring(0,3) == "req")

I chose to add "req" to the start of the names of all text entry boxes that I required users to fill out before submitting the form.  Thus, line 12 of the script can check whether the first three characters in the name of the "element" (text box) is equal to "req".  To do this, we use the String object method substring().  We can use substring(), because form.elements[i].name evaluates to a string (i.e., the name we gave it in the html body).

The substring() method extracts a specified portion of a string and returns that portion.  It takes two integer arguments.  The first integer indicates the position in the string at which to start extracting ("0" is the beginning position of the string, due to zero-based indexing) and the second integer indicates the number of characters to extract, in this case three.

If the element name starts with "req", then it is subjected to another test:  whether its current value (i.e., what is typed into the box) is empty ("") or not.  If it is empty, then the value of the variable marker is set to 1, an alert is sent, and then the text object focus() method is used to place the cursor in the box that was not filled in (lines 14-16).

Lastly, at line 17 a break statement is issued, because we want to put the cursor in the first unfilled required text box if there is more than one that is empty.

After the for loop has finished, if marker is still equal to zero then line 22 evaluates to true (because "0" in an if statement in JavaScript evaluates to false) and then the form would normally be submitted at this point.