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. 
The process of validating forms involves checking the form to see if:
- All of the required data is proved
- The data provided is valid
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 ExplicitSub 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.submitEnd 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 IfNext 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 IfOur 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 IfThat'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.submitThe 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.
With this exercise we will add scripts to validate and submit the form that we have been constructing in the previous four lessons.
Exercise 5: How to Validate and Submit a Form
In this exercise you will create an HTML document which contains a script that will retrieve data from a web page, perform calculations, and output results back to the web page. Additionally it will lookup prices for products and provide discounts based upon the order size. Finally, it will validate data and submit the web page form to a server.
Testing the HTML Document
Open up the file exer5_v1.html in a text editor. This is the HTML component of this exercise. Look over the HTML document. Note the addition of a command button cmdSubmit, which will be used to submit our form to a web server, after validation. Load the file up into Internet Explorer and it should look like the illustration below:
Next we will add the script that will handle the validation and submit our form. A completed copy of this part of the exercise can be found in the file exer5_v2.html.
Sub cmdCalculate_OnClick Dim AmountofDiscount Dim AmountofTax Dim DISCOUNT_LIMIT Dim DISCOUNT_RATE Dim SubtotalBefore Dim SubtotalAfter Dim TAX_RATE Dim TotalCost' Perform validation checks before process anything. While this is not ' everything that we could check, it provides an example of how you can ' validate data. If (Len(document.frmExercise5.txtQuantity.value) = 0) Then MsgBox "You must enter a quantity." Exit Sub End If If (Not IsNumeric(document.frmExercise5.txtQuantity.value)) Then MsgBox "Quantity must be a numeric value." Exit Sub End If If (Len(document.frmExercise5.cmbProducts.value) = 0) Then MsgBox "You must select a product." Exit Sub End If' Define our constant values. DISCOUNT_LIMIT = 1000 DISCOUNT_RATE = .10 TAX_RATE = 0.06' Calculate the subtotal for the order. SubtotalBefore = document.frmExercise5.txtQuantity.Value_ * document.frmExercise5.lblUnitCost.Caption' Check to see if the order is large enough to offer discounts. If (SubtotalBefore > DISCOUNT_LIMIT) Then AmountofDiscount = SubtotalBefore * DISCOUNT_RATE Else AmountofDiscount = 0 End If SubtotalAfter = SubtotalBefore - AmountofDiscount ' Calculate taxes and total cost. AmountofTax = SubtotalAfter * TAX_RATE TotalCost = SubtotalAfter + AmountofTax' Display the results. Document.frmExercise5.lblSubtotalBefore.Caption = SubtotalBefore Document.frmExercise5.lblDiscount.Caption = AmountofDiscount Document.frmExercise5.lblSubtotalAfter.Caption = SubtotalAfter Document.frmExercise5.lblTaxes.Caption = AmountofTax Document.frmExercise5.lblTotalCost.Caption = TotalCostEnd Sub' Submit this order for processing.Sub cmdSubmit_onClickMsgBox "Your order has been submitted." document.frmExercise5.submitEnd SubSub cmbProducts_Change() Select Case Document.frmExercise5.cmbProducts.Value Case "NEC MultiSync E1100" Document.frmExercise5.lblUnitCost.Caption = 1590 Case "NEC MultiSync P1150" Document.frmExercise5.lblUnitCost.Caption = 880 Case "NEC MultiSync E750" Document.frmExercise5.lblUnitCost.Caption = 1940 Case Else Document.frmExercise5.lblUnitCost.Caption = 0 End SelectEnd SubSave the file and test it by loading it into Internet Explorer. Without entering anything into the Quantity field click the Calculate Costs button. The following dialog will be displayed:
Enter the letter A into the Quantity field and click the Calculate Costs button. You will see the following dialog:
Enter a value of 10 into the Quantity field and once again click the Calculate Costs button. This time you will see the following dialog:
Finally, select the NEC MultiSync E1100 monitor from the combo box. Clicking the Calculate Costs button followed by the Submit Order button will leave you with the following:
How It Works
The script that was added to Exercise 5 has two components, one which validates the form and one that submits the form. We will look at each component separately.
Form Validation
The validation of our form is handled by the event procedure associated with the button named cmdCalculate. You should note that this is only an example of what is possible in the way of validation and is by no means a comprehensive validation script.
We start by checking the length of the Quantity field to determine if the user has entered anything. VBScript's Len function is well suited for this purpose. If we find that the length is zero, the user is informed and we exit the event procedure.
Next we check to make sure that the Quantity field contains a numeric value. For this we use VBScript's IsNumeric function. An order would never be valid without selecting a product first so we check the value of the Monitor combo box, again using the Len function.
If we pass all of these validations the cost of the order is calculated and displayed.
Submitting the Form
The submitting of the form is handled within the event procedure for the button named cmdSubmit. When the user clicks this button first a message box is displayed to confirm with the user that the order has been processed and then the form is submitted.
Normally we would include the script for both validating a form and submitting it in the same event procedure. I chose to separate them in this example so that it would be easier to understand.
No comments:
Post a Comment