Jump to Main Content

Validation with forms & JavaScript

Validating checkboxes

When working with check boxes, we take a slightly different approach to determine which one has been selected. Since check boxes can have one or multiple values selected, they are treated as an array. An array is simply a variable which holds different values. We check the value of the ice cream field for a value 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";
} 
if(message==noerrors){
return  true 
 }else{
 alert(message);
 return false;
 }
}

Let’s examine the code in greater detail:

  • We declare a variable icecream and assign a value of false
  • Since there can be multiple checkboxes selected, we use a loop:
    • Our for loop works as follows:
      • Creates a counter variable, i, and sets the value to 0
      • We use a condition which checks:
        • Whether our counter variable is less than the number of checkboxes
        • If this is true, we continue looping and increment the counter each time through the loop
        • Then we check if one check box is checked:
          • If its checked, we set our icecream variable to true

Next, we create another condition using the negation operator. The negation operator (!) takes a value of true or false and switches it based on the value it receives. The condition works as follows:

  • If the value of icecream is not equal to true, show an error message

Save your file and preview the results.

See form 3

Validating radio buttons

Since radio buttons are Boolean values (true or false), we can check the value of our gender 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";   
 }
 if(message==noerrors){
  return  true 
 }else{
  alert(message);
 return false;
 }
}

Let’s examine the code in greater details:

  • First, we declare a new variable named gender and assign it the gender input field
  • Next, we use a condition to determine the following:
    • Using the negation operator, we check gender for a value. If false, we show an error message

The reason we access the first and second element of our gender array is we need to check that either male or female was selected. Save your file and preview the results.

See form 4

Validating our drop down list

A drop down list is similar to a checkbox in that it’s considered an array. However, only one option can be selected. We can check the value of our state 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(message==noerrors){
 return  true; 
 }else{
 alert(message);
 return false;
 }
}

Let’s examine the code in greater detail:

  • First, we declare a variable named state and assign it the selected index of our drop down list, which is a numerical value
  • Next, in our condition we do the following:
    • We check the value of our drop down list:
      • If it’s equal to a null value, we show an error message

Save your file and preview the results.

See form 5

We'll finish the article next.

top of page