Jump to Main Content

Validation with forms & JavaScript

Validating a text area field

We can check the value of a text area field the same way as an input field by adding the following code:

function userinformation(form){
 var  message="Please complete the following: \n\n";
 var noerrors=message;
 if(document.contact.fname.value==""){
message+="Please  enter your first name: John\n";
 }
 if(document.contact.lname.value==""){
  message+="Please  enter your last name: Doe\n"; 
 }
 var icecream = false;
 for (i = 0; i <  document.contact.icecream.length; i++) {
 if  (document.contact.icecream[i].checked)
 icecream = true; 
 }
 if (!icecream) {
 message+= "Please  select your favorite ice cream: Chocolate/Strawberry/Button Pecan\n";
}
 var  gender=document.contact.gender;
 if(!gender[0].checked  && !gender[1].checked){
 message+="Please  select your gender: Male/Female\n";  
 }
 var  state=document.contact.state.selectedIndex;
 if(document.contact.state.options[state].value=="null"){
 message+="Please  select a state: MO\n"; 
 }
 if(document.contact.comments.value==""){
message+="Please provide us with some comments  \n";
}
 if(message==noerrors){
 return  true; 
 }else{
 alert(message);
 return false;
 }
}
  • In our condition we check the value of our comments field for a null value:
    • If it’s equal to a null string, we show an error message

Save your file and preview the results.

See form 6

One add-on which might be useful

One addition to this form which makes the visitor experience a bit better is adding a reset check. If the visitor has entered information into form fields, and they accidentally press the reset button, instead of deleting their information from the form fields, we show an alert asking them to confirm the reset action.

Create the reset file

Inside your text editor, create a new file named resetcheck.js and insert the following code:

// JavaScript Document
function confirmReset(){
var resetForm=confirm('Are you sure you want to reset the form?');
if(resetForm==true){
return true;
}else{
return false;
}
}

First, we create a function named confirmReset. Next, we create a variable named resetForm. Then we check the value of our variable using a condition to determine:

  • If the variable is equal to true, we show the confirmation message
  • If the variable is equal to false, we do nothing

In our HTML file, between the opening and closing head tags we link to the file:

<head>
<script type="text/javascript" src="contactus_7.js"></script>
<script src="resetcheck.js" type="text/javascript"></script>
</head>

Inside the opening form tag, we add an onReset attribute with a call to the confirmReset function which now will be called each time a visitor presses the reset button:

<form name="contact" method="post" onsubmit="userinformation(this);return false" onreset="return confirmReset();">

Save your file and preview the results.

See form 7

Some general thoughts

If you have Dreamweaver, it will validate form fields except checkboxes and radio buttons. There are some extensions which will validate these fields if you prefer not to manually program it. You will need to a Google search to find which extension suits you best.

Summary

In this article you learned how to:

  • Create, save and link to an external JavaScript file
  • Two different methods of showing error messages
  • How to validate:
    • Input fields
    • Radio buttons
    • Checkboxes
    • Drop down lists and
    • Text area
  • JavaScript syntax including how to create variables, loops, logical operators, and concatenation

Take the knowledge gained here and validate your form to your heart’s content!

If you have questions, contact me.

top of page