Automatically Validating a Form

switch (element.type) 

With a bit of effort, JavaScript is capable of automatically validating a form, given that all form fields are mandatory. Then, iterating over the form elements does the trick. Each element's type property returns the type of the field, and Table 8.1 shows a list of the most important ones. Then, depending on the field type, the validation takes place.

Table 8.1. The Form Field Types of JavaScript

Type	Description
button	HTML button
checkbox	Check box
password	Password field
radio	Radio button
reset	Reset button
select-one	Selection list
select-multiple	Multiple selection list
submit	Submit button
text	Single-line text field
textarea	Multiline text field

The following code takes special care of radio button groups. Since the loop over the form elements visits every element and therefore every radio button, a list of already-checked radio button groups is maintained.

Otherwise, a group of three radio buttons would be checked three times, generating three error messages if no button has been selected.

Automatically Validating a Form (validate.html; excerpt)

<script language="JavaScript"   type="text/javascript"> function checkform(f) {   var errortext = "";   var checkedgroups = "";   for (var i=0; i<f.elements.length; i++) {     var element = f.elements[i];     switch (element.type) {       case "text":       case "textarea":       case "password":         if (element.value.replace(/\s/g, "") ==           "") {           errortext += element.name + "\n";         }         break;       case "checkbox":         if (!element.checked) {           errortext += element.name + "\n";         }         break;       case "radio":         var group = f.elements[element.name];         if (checkedgroups.indexOf("[" +           element.name + "]") > -1) {           continue;         } else {           checkedgroups += "[" + element.name + "]";         }         var groupok = false;         for (var j=0; j<group.length; j++) {           if (group[j].checked) {             groupok = true;           }         }         if (!groupok) {           errortext += element.name + "\n";         }         break;       case "select-one":       case "select-multiple":         var selectok = false;         for (var j=0; j<element.options.length;           j++) {           var item = element.options[j];           if (item.selected && item.value != "") {             selectok = true;           }         }         if (!selectok) {           errortext += element.name + "\n";         }         break;     }   }   if (errortext == "") {     return true;   } else {     window.alert(       "The following fields have not been correctly filled out:\n\n"       + errortext);     return false;   } } </script> 

Figure 8.8 presents the result: All form fields miss their appropriate content. Note, though, that you may want to amend this script and maybe exclude check boxes from the list, since these form elements are optional most of the time.

Figure 8.8. The form is automatically validated.