Form Validation Overview

There are two ways we can do Form Validation:

  1. Server-side
  2. Client-side

Server-side Validation Process

<FORM
  NAME="vForm"
  METHOD="POST"
  ACTION="formmail.pl"
  onSubmit="return ValidateInput(this)">

METHOD (GET & POST) and ACTION will be discussed and demonstrated in Week 6.

In the Server-side Validation process when the User Submits the Form, "all" the Form's information is passed to server, the server in turn "passes" this information to a "CGI" (formmail.pl) which then will process the Form's Information. If the Validation "Tests" are not all passed then the "CGI" (formmail.pl) sends an "alert" message back to the User (back through the server) informing the User where the problems are.

It is obvious that Server-side Validation process presents us with quite a few problems:

  1. The Form's Information must be passed back to the server - clogging up the network
  2. The server then must "pass" the information to the CGI
  3. The CGI must process the information - using valuable server resources
  4. The CGI then will send back (through the web server) to the User the error message(s)

It should be quite obvious the whole process takes quite a bit of time. We can see that we should avoid Server-side Validation whenever possible.

Server-side Validation Process

Client-side Validation

<FORM
  NAME="vForm"
  METHOD="POST"
  ACTION="formmail.pl"
  onSubmit="return ValidateInput(this)">

Client-side Validation avoids all the problems associated with Server-side Validation. NOTE: There are occasions when Server-side Validations are necessary, for example, having to do Database lookups.

The onSubmit is an Event Handler associated with the Submit Action. With the setup above (onSubmit="return ValidateInput(this)) when you press the Submit Button the Event Handler onSubmit will be initiated. In this particular case there are two parts:

  1. Call a Function to process the Form's Information -- to Validate the Information
  2. return either a true or false based on the "Validation Process"

ValidateInput(this) is where the Form Validation process is occurring. Based on the "validation" process either a false or a true will be returned. A true will only be returned if the Form's required elements pass all the Validation "tests". If not all the Validation "tests" are passed then a false will be returned.

The normal response for a Submit would be to take "all" the Information from the Form and pass that information to server. Remember from the Form Handlers Section, a return false is a way for JavaScript to stop your browser from doing what it would otherwise do which is to send "all" the information to the server. This procedures prevents us from sending the Form's Information until it has passed all the Validation "tests".

NOTE: How that information gets passed to server is specified by the METHOD which be covered in Week 6.