JavaScript 101 - Part 3

Required Fields

The simplest and most common form of form validation is required fields. You can indicate to the user that certain fields in the form must be filled in, and use JavaScript to prevent any submissions where those fields are empty from going through.

Here’s the basic code for a form with a single field that must be filled in before the submission will be allowed:

<script language="JavaScript" type="text/javascript">  
<!--  
function validateForm() {  
 var name = document.myForm.username.value;  
 if (name == "") {  
   alert("Required field not filled in!");  
   return false;  
 } else return true;  
}  
//-->  
</script>  
<form action="blah.cgi" name="myForm" method="post"  
     onSubmit="return validateForm();">  
Your name: <input type="text" name="username"> *  
<input type="submit" name="submit" value="Go!">  
</form>  
<p>(* indicates a required field)</p>

Once again, we are using a custom function (validateForm()) that returns either true or false to indicate whether a form submission should be allowed or not. In this case, however, the function must check if the required form field has been filled in or not. Let me explain how this function works, beginning with the first line:

var name = document.myForm.username.value;

No doubt you recognize that this line creates a variable called name, but the value that it assigns to it is likely a little confusing. What this line actually does is fetch the value in the required field and store it in the new name variable. To access this value, it makes use of a series of Document Object Model (DOM) objects. document represents the HTML document itself. The dot following this indicates that we want to access something ‘inside’ or ‘belonging to’ the document – our form, in this case.

Looking at the form tag, you’ll notice that I’ve added an attribute: name="myForm". This assigns a name to our form, which the line of JavaScript above then uses to access our form (document.myForm). Having accessed the form, we can then access the required field itself in the same way (document.myForm.username).

This DOM object, which represents a text field in our form, has a number of properties and methods, as we learned in Part 2. The most important of these for our purposes is the value property, which contains the value that is currently displayed in the form field. Thus, document.myForm.username.value will yield the value that was typed into the form field.

The rest of the validateForm() function is very straightforward. It checks if this value is an empty string (which would indicate that the form field was not filled in), and if so displays a message to the user before returning false, cancelling the form submission. Otherwise, it returns true and the form submission proceeds as usual.

Multiple required fields are just as easy to implement. Here’s an example with two required fields and one optional one:

<script language="JavaScript" type="text/javascript">  
<!--  
function validateForm() {  
 var name = document.myForm.username.value;  
 var email = document.myForm.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" name="myForm" method="post"  
     onSubmit="return validateForm();">  
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>