JavaScript 101 - Part 3

Improved Required Fields

There are a couple of improvements we can make to the code we developed above. First of all, instead of assigning a name to our form for the validateForm() function to use to access the values of its elements, we can save ourselves a little typing by sending the function a reference to the form in a parameter:

<script language="JavaScript" type="text/javascript">    
<!--    
function validateForm(theForm) {    
 var name = theForm.username.value;    
 var email = theForm.email.value;    
 if (name == "") {    
   alert("Please fill in your name.");    
   return false;    
 }    
 if (email == "") {    
   alert("Please fill in your email address.");    
   return false;    
 }    
 return true;    
}    
//-->    
</script>    
<form action="blah.cgi" method="post"    
     onSubmit="return validateForm(this);">    
Your name: <input type="text" name="username"> *<br>    
Email address: <input type="text" name="email"> *<br>    
Phone Number: <input type="text" name="phone"><br>    
<input type="submit" name="submit" value="Submit">    
</form>    
<p>(* indicates a required field)</p>

In the above, I have modified the validateForm() function to take a single parameter and store its value in the variable theForm. This variable is then used as the basis for accessing elements in the form to be validated (e.g. theForm.email.value). In the form tag’s event handler, we pass a reference to the form itself by using the keyword this as a parameter. This special variable always contains a reference to the ‘current’ object, which in the case of an onSubmit event handler is the form being submitted.

This technique of passing a reference to the form to be validated opens the door to writing more complex validation functions that can be used by more than one form. Such complex types of form validation are beyond the scope of this article, however.

Another improvement that can be made to the above code is to automatically place the text cursor into a required field that was not filled in, so that the user can simply type the value and then resubmit the form. As we have already seen, form text fields have a value property, but they also have a number of methods. One of these is the focus() method, which gives the field in question ‘focus’ (i.e. moves the text cursor to it). Here’s an updated version of the above example that uses the focus() method to assign focus to any required field that is not filled in:

<script language="JavaScript" type="text/javascript">    
<!--    
function validateForm(theForm) {    
 var name = theForm.username.value;    
 var email = theForm.email.value;    
 if (name == "") {    
   alert("Please fill in your name.");    
   theForm.username.focus();    
   return false;    
 }    
 if (email == "") {    
   alert("Please fill in your email address.");    
   theForm.email.focus();    
   return false;    
 }    
 return true;    
}    
//-->    
</script>    
<form action="blah.cgi" method="post"    
     onSubmit="return validateForm(this);">    
Your name: <input type="text" name="username"> *<br>    
Email address: <input type="text" name="email"> *<br>    
Phone Number: <input type="text" name="phone"><br>    
<input type="submit" name="submit" value="Submit">    
</form>    
<p>(* indicates a required field)</p>