JavaScript Example 1-5
Validating Forms

Click Here for Previous JavaScript Tutorial Home Click Here for Next

Example code from Dr. Clue's Javascript tutorial, http://www.drclue.net/F1.cgi/HTML/JAVA/JAVA.html

This example demonstrates very simple validation of form input. The form below requires that input be supplied for fields A, C and D.

The Form...

A
B
C
D
Reload

When you submit your form it is first checked to verify that the required fields have been supplied. If that succeeds, then the form is submitted to a CGI program at www.drclue.net which will simply display all the information posted with the form.

Source Code

1:    <FORM ACTION="http://www.drclue.net/forms.cgi" METHOD=POST
2:      onSubmit="return Require(this,'A,C,D')">
3:    A <INPUT TYPE=TEXT NAME=A VALUE=""><BR>
4:    B <INPUT TYPE=TEXT NAME=B VALUE=""><BR>
5:    C <INPUT TYPE=TEXT NAME=C VALUE=""><BR>
6:    D <INPUT TYPE=TEXT NAME=D VALUE=""><BR>
7:      <INPUT TYPE="SUBMIT">
8:    </FORM>

When you submit your form it is first checked by a JavaScript function Require to verify that the required fields A, C, and D have been supplied (see line 2 above). If that succeeds, then the form is posted to a CGI program at www.drclue.net (see line 1) which will simply display all the information posted with the form.

Here is the source code of the Require function:

  function Require(obForm,szFields)
    {
      var fields = szFields.split(",")
      var szMissing= new Array();
      for (x=0;x<fields.length;x++) {
        if (obForm.elements[fields[x]].value.length==0) {
           szMissing[szMissing.length]=new String(fields[x]);
        }
      }
      if (szMissing.length) {
        alert("The field"+((szMissing.length>1)?"s ":" ")+szMissing.join(",")+" must be filled in first");
        return false
      }
      return true;
    }
 
Click Here for Previous JavaScript Tutorial Home Click Here for Next