JavaScript Example 1-5
Validating Forms

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...

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;
    }