VBScript and Forms

  • Article

The following example illustrates how to add validation functionality to a Web page by including VBScript code.

Simple Validation

You can use Visual Basic Scripting Edition to do much of the form processing that you'd usually have to do on a server. You can also do things that just can't be done on the server.

Paste the following code in a new text file, save the file with an .htm extension, and then double-click the file to view it in a browser. The HTML code is for a text box and a button. If you use Microsoft Internet Explorer to view the page, you'll see a small text box with a button next to it.

<html>
<head>
<title>Simple Validation</title>

<script language="VBScript"> 
<!--

Sub Validate
    Dim TheForm
    Set TheForm = Document.forms("ValidForm")
    
    If IsNumeric(TheForm.Text1.Value) Then
        If TheForm.Text1.Value < 1 Or TheForm.Text1.Value > 10 Then
          MsgBox "Please enter a number between 1 and 10."
        Else
          MsgBox "Thank you."
        End If
    Else
        MsgBox "Please enter a numeric value."
    End If
End Sub

-->
</script>
</head>

<body>
<h3>Simple Validation</h3>
<hr>

<form id="ValidForm" action="nothing.asp"
onsubmit="Validate(); return false;" language="jscript">

Enter a value between 1 and 10: 
<input name="Text1" type="text" size="2">
<input name="Submit" type="Submit" value="Submit">

</form>
</body>
</html>

The Value property of the text box is used to check the entered value. To get the Value property, the code has to qualify the reference to the name of the text box.

You can always write out the full reference Document.ValidForm.Text1. However, where you have multiple references to form controls, you'll want to do what was done here. First declare a variable. Then use the Set statement to assign the form to the variable TheForm. A regular assignment statement, such as Dim, doesn't work here; you must use Set to preserve the reference to an object.

Using Numeric Values

Notice that the example directly tests the value against a number: it uses the IsNumeric Function function to make sure the string in the text box is a number. Although VBScript automatically converts strings and numbers, it's always a good practice to test a user-entered value for its data subtype and to use conversion functions as necessary. When doing addition with text box values, convert the values explicitly to numbers because the plus sign (+) operator represents both addition and string concatenation. For example, if Text1 contains "1" and Text2 contains "2", you see the following results:

A = Text1.Value + Text2.Value   ' A is "12"
A = CDbl(Text1.Value) + Text2.Value   ' A is 3

Validating in the Button Event

The following example uses a plain button control of type button.

To send the data to the server, the code invokes the Submit method on the form object when the data is correct. The server then handles the data just as it otherwise would, except that the data is correct before it gets to the server.

<html>
<head>
<title>Validation in Button Event</title>

<script language="VBScript">
<!--

Sub Button1_OnClick
    Dim TheForm
    Set TheForm = Document.forms("ValidForm")
    If IsNumeric(TheForm.Text1.Value) Then
        If TheForm.Text1.Value < 1 Or TheForm.Text1.Value > 10 Then
            MsgBox "Please enter a number between 1 and 10."
        Else
            MsgBox "Thank you."
            TheForm.Submit
        End If
    Else
        MsgBox "Please enter a numeric value."
    End If
   
End Sub
-->
</script>
</head>

<body>
<h3>Validation in Button Event</h3>
<hr>

<form id="ValidForm">

Enter a value between 1 and 10: 
<input name="Text1" type="text" size="2">
<input name="Button1" type="button" value="Click Here">

</form>

</body>
</html>

Find complete information about the Submit method and other methods in the Internet Explorer Scripting Object Model documentation, which can be found on the Microsoft Web site.

So far, you've seen only the standard HTML <FORM> objects. Internet Explorer also lets you exploit the full power of ActiveX controls (formerly called OLE controls) and Java objects.

Change History

Date

History

Reason

August 2009

Modified introduction to second example, and reformatted both examples.

Content bug fix.

August 2009

Modified first example.

Customer feedback.