Client-Side Form Field Validation with VBScript and ASP

Submitted on: 1/5/2015 6:52:00 AM
By: Glenn Cook (from psc cd)  
Level: Beginner
User Rating: By 7 Users
Compatibility: ASP (Active Server Pages), VbScript (browser/client side)
Views: 7318
     Form field validation is one of the most important functions in making successful web-based applications, but server-side validation is not always the answer!


Client-Side Form Field Validation with VBScript and ASP

Form field validation is one of the most important functions in making successful web-based applications. It protects your database from errors, filters bad data, and forces the user to think twice before submitting data with typos. For some reason though, documentation in many VBScript and JavaScript books on the market tend to gloss over this issue. I think it might be that field validation scripting is somewhere between learning the basics but not complicated enough for the advanced literature. The ASP books cover server-side validation (Remember? It's a server-side scripting language.) but this is not always an ideal approach to validating data. The problems with server-side validation are that it bogs down your server's resources when the user could handle the routines locally, and it offers a slower response time for the user when it actually finds errors. This tutorial is designed to take the load off the servers for a while and get the beginning weblication programmer closer to the intermediate level and beyond. Have fun!

The goal of the script:

When I click the submit button I want my script to check the field data in my form and either:

  1. Submit the data if it all looks good
  2. Show an alert box and do not send the data.

You  need a few tools:

  • The OnSubmit event.
  • A form name in your HTML code (e.g. <form METHOD="POST" ACTION="vbsample.asp" name="MyForm">)
  • A Submit Button: (e.g. <input TYPE="submit" VALUE="Submit Info!" name="submit">
  • An Input Box with name: (e.g. <input type="text" name="MyBox" size="10">)
  • Some "If..Then" statements
  • An "Alert Box"
  • The secret. (I love suspense.)

Let's see it work before we get into the guts of it!

  1. Type your name and submit!
  2. Enter nothing and submit!
  3. Enter one character and submit!



<-- Option Explicit

dim validation

dim header

header =

The first thing you want to do is tell the browser that the code you are about to run is VBScript.   The next thing you want to do is make some variables that we are going to use in our routine.
The "validation" variable is going to be used to help us determine whether we should send the form or not.  It will can be equal to either "True" or "False" (By the way, that's pretty much the secret ingredient!
The "Header" variable I will use to hold the string information for a MsgBox property.
Function MyForm_OnSubmit

validation = True

The next thing you want to do is make a function that is going to be called when a user clicks the "Submit Info" button. The function needs to be bound to your form name and the OnSubmit event so VB knows what it is that you are trying to submit.  I have named my form...."MyForm"
I have also made my "validation" variable equal to "True."   I will follow this with some "If...Then" statements that will try to change the variable to "False."
If Len(Document.MyForm.MyBox.Value) > 2 Then

MsgBox "You have entered too many characters!  You need fewer characters before I will submit this form",8, Header

validation = False

End If

My first "If...Then" basically says that If the Length of the value of the contents of Mybox in the form Myform within the current document is less than five characters Then show the Message Box(MsgBox). The properties of the message box include the message string, then the type of message box(8), and I add the header message.  The next thing I do is make our validation variable equal to False. You'll see why in a second.
The last thing I do is End this If statement.
If (Document.MyForm.MyBox.Value) = "" Then

MsgBox "You have forgotten to fill in the input box!  Why would you want to submit nothing in a one field form? C'mon, give me   something to work with!",8, Header

validation = False

End If

In this "If..Then" I make sure the user has at least entered something into the text input box.  If they haven't they will get a message box and once again the validation variable will be made equal to false.
If validation = True Then

MyForm_OnSubmit = True


MyForm_OnSubmit = False

End If

End Function


The last part of this routine is the secret.
All I do is test to see if any "If..Then" statement has made my validation variable equal to something other than "True".  If the validation variable equals "True" then MyForm_OnSubmit also equals "True."  If the variable equals something else other than "True" Then MyForm_OnSubmit will equal "False."   If the Function equals "False" then the OnSubmit event will not execute and the user is prompted to fix their mistake. Otherwise, the OnSubmit event fires and the form data is posted to the page that will process the submitted form. Simple!

Finally, End your If, tell VBScript to end the Function, and close the script with the SCRIPT tag.

Now granted, this is is a very simple example and in a real-world application you might have ten to twenty form fields to validate.   Although there is potential for your script becoming quite complicated you can use some subroutines that do some work for you.  Example:

Function MyForm_OnSubmit

Call Check(Document.MyForm.Company.Value,     "Please enter a company name.")
Call Check(Document.MyForm.Name.Value,     "Please enter a name.")

Sub Check(ByVal FieldValue, ByVal message)
        If FieldValue = "" Then
            MsgBox message, 8, Header
            validation = False
            End If
        End Sub


Other 7 submission(s) by this author


Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:

Your Vote

What do you think of this article (in the Beginner category)?
(The article with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)

Other User Comments

 There are no comments on this submission.

Add Your Feedback
Your feedback will be posted below and an email sent to the author. Please remember that the author was kind enough to share this with you, so any criticisms must be stated politely, or they will be deleted. (For feedback not related to this particular article, please click here instead.)

To post feedback, first please login.