Free Javascript Tutorials

home

JavaScript Tutorials

HTML Form Validation continued

 
Our quick javascript links
Little Programmes
 
 
 
 
 
 

 

JavaScript and Checkboxes

 

The only thing we're going to do with our check boxes on our form is to see if they have been ticked or not. If a box has been ticked, then no errors have occurred; if none of the boxes have been ticked, then an error has occurred, and the user will get an alert box. So our check box validation is a "yes" or "no" affair: Have they ticked a box or not?

What we're not doing is returned the text from the check boxes. The text for our check boxes was "Cool layout", "Easy to Navigate", etc. We're not passing these values back when the Submit button is clicked. All the same, we'll see how this is done.

On our Form, the Check box HTML code was this:

<input type="checkbox" name="Liked" value="Cool Layout">Cool Layout

<input type="checkbox" name="Liked" value="Easy to Navigate">Easy to Navigate

<input type="checkbox" name="Liked" value="Great Contents">Great Contents

The NAME value is crucial. For all our check boxes, the NAME is the same - "Liked". The text that people see on the page comes after the right angle bracket ( > ). The VALUE of the checkbox is the same as the text that people see on the page. (But it doesn't have to be).

With this in mind, here's our Check Box function:

function CheckLikes() {

boxes = document.f1.Liked.length
txt = ""
for (i = 0; i < boxes; i++) {
if (document.f1.Liked[i].checked) {
txt = txt + document.f1.Liked[i].value + " "
}

}


if (txt == "") {
Message = "No Boxes ticked"
}
else {
Message = ""
}

return Message
}

We start the function by getting the length of the check boxes:

boxes = document.f1.Liked.length

The length here means "How many Check Boxes are there". So our code reads "Of all the check boxes in the form called f1, how many are there with the name Liked?" The answer will be inserted into a variable called boxes.

After we set a variable called txt to a blank string (txt = "") we add a for loop to check all of the boxes with the NAME Liked:

for (i = 0; i < boxes; i++) {
if (document.f1.Liked[i].checked) {
txt = txt + document.f1.Liked[i].value + " "
}
}

Because we've given all of our checkboxes the same NAME, the browser can see them as an array of checkboxes. With an array, we can loop round checking values.

The for loop is set to start at zero, and the end condition is that value we put into the variable boxes - the number of checkboxes on our form.

Inside the loop, we can access the index number of each check box:

if (document.f1.Liked[i].checked)

Because the for loop started at zero, the check box Liked[0] will be examined first. If it has been checked, a true value is returned. The statement below is then executed:

txt = txt + document.f1.Liked[i].value + " "

The VALUE from the check box Liked[0] is added to the variable called txt.

Next time round the loop, the variable i will be 1. So the second check box will be examined to see if it was checked or not. If it has been, the VALUE of the checkbox is added to the txt variable.

And we go round and around examining the checkboxes called Liked. At the end of the loop, the variable txt will either hold the values from the check boxes, or it will still be a blank string. Depending on which it is, we can return a value for our function:

if (txt == "") {
Message = "No Boxes ticked"
}
else {
Message = ""
}

return Message

Again, we're building up our Message variable. Or not building it up, if no boxes have been ticked.

The function for our second lot of check boxes, the ones called "Hated", works in exactly the same way as the function above. Except you would changed the "Liked" to "Hated".

And that concludes our script to check form elements for errors. Once you add all the code, and test it out, you'd get a message box when the form is submitted but nothing has been entered. Try out the code by clicking the link below. Leave everything blank, then click submit.

Click here to see the Form with all the code added

To see all the code, click View > Source (in Internet Explorer).

In the next few parts, we'll take a look at how to validate other form elements: drop down boxes, list boxes, and Radio Buttons.

Move on to the Next Part-->

<--Back to the JavaScript Contents Page