Lesson 5:
Using VBScript with Forms
As the popularity of web page forms increase, so does the need to be able to validate data before the client browser submits it to the web server. As a scripting language, VBScript is well suited for this task. Once the form has been validated, the same script can be used to forward the data on to the server. In this lesson we will look at both the process of validating and submitting forms.
Validating Your Forms
The process of validating forms involves checking the form to see if:
Meticulous data validation scripts can be tedious to code but are well worth their return in verifying the quality of the data.
The validation example that we will be examining does not contain anything new in the way of VBScript. We are simply using the elements that we have learned in the previous lessons in a new way. Before reading any further you may find if beneficial to ponder how you would validate an HTML form using the VBScript techniques that you have learned.
Okay, are you through pondering? Let's look at an example to give you an idea of what is possible when it comes to validating forms.
Checking Form Input
This example is pretty simple. It has a single field in which the user can enter their age and a single command button that is used to submit their age to the server. A copy of this example can be found in exam_5a.htm.
<HTML>
<HEAD>
<TITLE>Working With VBScript: Example 5a</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!-- Instruct non-IE browsers to skip over VBScript modules.
Option Explicit
Sub cmdSubmit_OnClick
' Check to see if the user entered anything.
If (Len(document.frmExample5a.txtAge.value) = 0) Then
MsgBox "You must enter your age before submitting."
Exit Sub
End If
' Check to see if the user entered a number.
If (Not(IsNumeric(document.frmExample5a.txtAge.value))) Then
MsgBox "You must enter a number for your age."
Exit Sub
End If
' Check to see if the age entered is valid.
If (document.frmExample5a.txtAge.value < 0) Or _
(document.frmExample5a.txtAge.value > 100) Then
MsgBox "The age you entered is invalid."
Exit Sub
End If
' Data looks okay so submit it.
MsgBox "Thanks for providing your age."
document.frmExample5a.submit
End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
<H1>A VBScript Example on Variables</H1>
<P> This example demonstrates validation techniques in VBScript. </P>
<FORM NAME="frmExample5a">
<TABLE>
<TR>
<TD>Enter your age:</TD>
<TD><INPUT TYPE="Text" NAME="txtAge" SIZE="2">
<TR>
<TD><INPUT TYPE="Button" NAME="cmdSubmit" VALUE="Submit"></TD>
<TD></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
How It Works
The heart of this validation script is found in the click event procedure for the cmdSubmit command button. We start by checking if the user entered anything at all into the field using VBScript's Len function. This function returns the length of a string. If the length is 0, the data is invalid. We inform the user and exit the submit procedure via the Exit Sub statement:
' Check to see if the user entered anything.
If (Len(document.frmExample5a.txtAge.value) = 0) Then
MsgBox "You must enter your age before submitting."
Exit Sub
End If
Next we check to see if what the user entered is a numeric value. The VBScript function IsNumeric returns a true value when it is a number. If not, we tell the user and exit:
' Check to see if the user entered a number.
If (Not(IsNumeric(document.frmExample5a.txtAge.value))) Then
MsgBox "You must enter a number for your age."
Exit Sub
End If
Our final check involves verifying that the age they entered seems reasonable for our environment. I have determined that no age less than 0 or greater than 100 is acceptable. Using an If..Then statement we can check the value of the input field against this criteria:
' Check to see if the age entered is valid.
If (document.frmExample5a.txtAge.value < 0) Or _
(document.frmExample5a.txtAge.value > 100) Then
MsgBox "The age you entered is invalid."
Exit Sub
End If
That's it. While this example is by no means the most detailed validation script you will encounter it provides you with a basis of what is possible with VBScript.
Submitting Your Forms
Compared to validation, the process of submitting a form is simple. In our example we've used a normal HTML button with the Submit caption that is tied to an event procedure that both validates and at the same time submits the form. In Chapter 5, we've demonstrated how to use function MyButton_onSubmit, as an alternative.
The code that we would have to add to our previous example to submit the form is shown below:
' Data looks okay so submit it.
MsgBox "Thanks for providing your age."
document.frmExample5a.submit
The MsgBox statement lets the user know that their data has been processed. The form is then submitted by invoking the Submit method of the form object. As we saw in lesson 3 on objects, methods cause an object to perform a task. Here we are using the submit method of our form to cause the form to submit its data, just as if we had used a submit control.