Validating User Input - adOpenStatic.com

Client-Side Validation

<%
If isPostBack() then

   ' Perform server-side validation here

   ' If no errors after validation then

      ' Do database/etc work
      ' Redirect to next page

   ' Else load form values

Else

   ' Load default/initial form values

End If
%>

Looking at this part.
And at this part.

In order to quickly develop our client-side validation we make use of a set of VBScript functions. There functions will write out the necessary client-side javascript validation routines. This rudimentary code-reuse allows us to quickly develop the validation code, whilst keeping the page clutter to a minimum.

An example page (page1.asp) would look like this:

<body>
<%
   Call WriteFormHeader("Form1Validator")

   ' Writes out javascript for a required field
   Call WriteFormFieldTextRequired("txt1", "1st field")

   ' Writes out javascript for a minimum length field
   Call WriteFormFieldTextRequired("txt2", "2nd field")
   Call WriteFormFieldTextMinLength("txt2", 5, "2nd field")

   ' Writes out javascript for acceptable values only
   Call WriteFormFieldAccept("txt3", "0123456789", _
      "Please enter only 0-9 values in the 3rd field")

   Call WriteFormFooter()
%>

<form method="post" action="page1.asp" name="Form1" onSubmit="return Form1Validator(this)" >
   <input type="hidden" name="postback" value="<% =GetFileName()%>"><br>
   1st field: <input type="text" name="txt1" value="<% =strTxt1%>"><br>
   2nd field: <input type="text" name="txt2" value="<% =strTxt2%>"><br>
   3rd field: <input type="text" name="txt3" value="<% =strTxt3%>"><br>
   <input type="Submit">
</form>

The code above would write out a simple HTML form with three text input boxes and a submit button. That said, there are three things about this form that we'll look into.

Firstly, you'll notice that the form fields all have a value set via implicit ASP Response.Write() (the =strTxt1 bit). This is important - it allows you to populate the form with initial values if you wish, but more importantly, when we post the form back to the server, we can fill those ASP variables with the values submitted by the user. If we have to reload the form (because the input failed server validation), then the form is automatically repopulated with the values that the user submitted.

Obviously we can extend this further. If the data for field 1 was invalid, we could set strTxt1 = "" in some ASP code, so all the user supplied data would be reloaded except the field that failed validation. As well, we could blank any password fields to stop the values being reloaded in the HTML source - but more on this later.

The second thing to note is the hidden "postback" form field. When the form is originally loaded, the Request.Form("postback") field will be empty, (because we haven't submitted the form yet). This triggers the code to load the form for the first time. If the form is submitted, we see that the Request.Form("postback") field has a value of returned by the function GetFileName(). When the form is submitted the function isPostBack() is called again, and because Request.Form("postback") now has a "correct" value, the code to validate the form is initiated.

The third thing to note is the use of ASP routines to write out the form field validation javascript. This is critically important to rapid development. Instead of writing volumous client-side javascript, the routines will do it for you. An alternative is to include a generic javascript library on each page (using a HTML javascript src tag) and write the necessary code to call the relevant function in the javascript file.

I'll put the code listing for a couple of the subroutines here. Creating the subroutines is easy. Download or create-your-own working javascript validation code, then create subs to write it for you. The first is WriteFormHeader()

<%
'----------------------------------------
' Accepts strFunctionName as string - Name of javascript function
'----------------------------------------

Sub WriteFormHeader( _
   ByVal strFunctionName _
   )

   With Response
      .Write("   <script type=""text/javascript"">") & vbCrLf
      .Write("   <!--") & vbCrLf
      .Write("   function " & strFunctionName & "(theForm)" & vbCrLf)
      .Write("   {") & vbCrLf
   End With

End Sub ' WriteFormHeader
%>

The above function will write out some HTML/Javascript that looks like (assuming we pass in "Form1Validator")

The following function (WriteFormFieldReqd) creates the necessary javascript to validate a field which has been designated as "required". We used this for Field 1 above. We use this where we require the user to enter some value into the field.

<%
'----------------------------------------
' Accepts strFieldName as string -Name of the field to validate
' Accepts strDisplayName as string - Name of the field to be used in the
' alert message you want to pop up
' Writes javascript to pop up a javascript alert box if nothing is entered into the field
'----------------------------------------

Sub WriteFormFieldTextRequired( _
   ByVal strFieldName, _
   ByVal strDisplay _
   )

   With Response
      .Write("   // " & strDisplayName & " - Start" & vbCrLf)
      .Write("   if (theForm." & strFieldName & ".value== """")" & vbCrLf)
      .Write("   {" & vbCrLf)
      .Write("   alert(""Please enter a value for the \""" & strDisplayName & "\"" field."");" & vbCrLf)
      .Write("   theForm." & strFieldName & ".focus();" & vbCrLf)
      .Write("   return (false);") & vbCrLf
      .Write("   }") & vbCrLf
      .Write("   // " & strDisplayName & " - End" & vbCrLf)
   End With

End Sub
%>

The above subroutine will write out (if passed the parameters "txt1" and "1st Field"):

// txt1 - Start
if (theForm.txt1.value=="")
{
alert("Please enter a value for the \"1st Field\" field.");
theForm.txt1.focus();
return (false);
}
// txt1 - End

Personally I have a bundle of little subs like the ones above. Examples would include: required fields, minimum length fields, maximum length fields, subs to verify that only certain characters have been typed into a field, subs to disallow a given option in a select box etc. I put all these subs into an include file called WriteFormValidator.asp and include it on every page that has a HTML form that requires validation. Then it's a simple matter of writing out a couple of lines of ASP code to call the subs to generate the javascript necessary to validate the form.

Back to Introduction | Onto Server-Side validation

Back to Code Listing