When creating Web-based data-entry forms, data validation is a must. But even with many sites that employ exhaustive data validation techniques, often little time is spent developing exactly how to report validation errors to the user. At these sites, a validation error often means getting the following generic statement on a white page: “One or more errors were found . . . please click your browser’s ‘Back’ button and check the form again.” This is hardly an intuitive response, and I’m less than enthusiastic, in this day of fourth- and soon fifth-generation browsers, to click “Back” and visually check each field. I’d rather spend the time with a search engine looking for a competitor’s more user-friendly site.
So, when client-side JavaScript form validation won’t cut it (i.e. for validating against a database whose data you don’t necessarily want accessible in the HTML code), I use the following solution. All code examples, by the way, are for VBScript.
The following is the logical flow:
Figure 1
I break up the data-entry pages into page pairs, one page for the form and the other page for validating and writing to the database. Respectively, we will call these “client1.asp” for client-side and “server1.asp” for server-side.
Client-Side
Client1.asp contains the form, as well as any JavaScript validation. I use JavaScript to check for proper numeric values, date values, or if the field is blank. I enclose the form within a table (<TABLE CELLBORDER=0>) and enclose each form control in its own cell (<TD>.)
Server-Side
Server1.asp receives the values from client1.asp and performs the rest of the validation. The typical validation page has the following top-down structure:
Receive values (request.querystring)
Validate values
If invalid values are found, redirect to previous page.
If no invalid values are found:
Write values to database
Redirect to next page
Step 1 and 2
I dimension an ERROR string, which I build with every invalid value encountered. Example:
<%F1 = Request.QueryString("F1")
If Len(F1)=0 or IsNull(F1) Then ERROR=ERROR & "__F1"%>
I delimit the field names in the error string with a double-underscore to distinguish between fields with similar names (i.e., “F1” and “F10”).
Step 3
After validating all the received values, the length of the ERROR string is checked. If the length is 0, no errors have been found, andall data is valid. If greater than zero, however, the page is redirected to the previous page. The following is included in the redirection URL:
Be sure to use the Server.URLEncode function for text field values since these values will be passed in the URL field.
The form page (client1.asp) receives ERROR and checks the length of its value:
<%
If Len(ERROR) > 0 Then
response.write("Errors have been found . . . " &_
"please checked the highlighted sections.")%>
Since Len(ERROR) is greater than zero, the message "Errors have been found . . . please check the highlighted sections" is drawn at the top of the page.
And now the form. The form elements are all preceded with an IF...THEN statement. The following is an example for form control "F1."
Note that the value of this control matches what was sent to it by the redirect (<INPUT TYPE=TEXT NAME="F1" VALUE="<%=F1%>">.) If F1 has a value, it will be shown in the field. This avoids the user having to re-enter all the data. (How many users would stick around for this?) Also note the Instr command. If the field names in the ERROR string weren’t delimited by the double-underscore (or something similar), the example F1 Instr would be true if ERROR contained "F1" or "F10." Of course, these examples only apply to text controls; fancier measures have be taken for other types of HTML form controls, such as checkboxes. Lastly, notice that the control is placed in its own table cell (<TD>). This allows the actual control to be highlighted with a <TD BGCOLOR=RED>, showing the user exactly what form controlsneed correction.
Step 4
When data from client1.asp passes through the server1.asp validation routine without any errors, the database section of server1.asp is executed, updating the database with the data from the form. Then the user is redirected to the next page (i.e., client2.asp.)
Conclusion
And that is basically it. This solution should also work well with server-side ActiveX validation components that return validation errors.
About the Author
Don Franke is a Web developer and programmer at CoAMS, Inc., in Chicago, where he is currently working on the migration from UNIX Informix to Microsoft SQL Server. His was previouslya software engineer at 3Com, where he developed an R&D test group intranet using ASP and Informix for Windows NT. His main development tool is Microsoft’s Development Studio 6.0, which he uses for ASP and Active X DLL development and soon object-oriented programming in Visual Basic. You can find him in the January 1999 issue of Windows NT magazine, in which he won an award as one of 1998’s top Windows NT innovators of the year. He can be contacted at donfranke@yahoo.com.
Developers who don't want to spend a lot of money on SQL Server and who want a database that's more robust than Access may find MySQL to be a pleasant alternative. This introductory article covers the bare essentials for getting MySQL installed and running in the Win32 environment. [Read This Article][Top]
There is never a guarantee of project success when endeavoring to build a sophisticated application. However, there are established steps to follow that will ensure a clear, concise scope, support for the team involved, and a solid opportunity for successful deployment. [Read This Article][Top]
If your SQL Server is exposed to the Internet, then hackers are probing it. This article shows how to secure a SQL Server database that's being used with a Web application [Read This Article][Top]
Feel intimidated by .NET? This article by Rob Chartier is designed to ease any level VBScripter (ASP) into .NET by clarifying some OOP concepts. [Read This Article][Top]
A few members of the 15 Seconds discussion list talk about the proper way to use methods in order to prevent ADO object errors.
[Read This Article][Top]
Solomon Shaffer explores the life cycle of an ASP.NET page from initialization to unloading. He also explains the various methods to override ASP.NET server-side events. [Read This Article][Top]
Rob Chartier creates a simple portable and reusable address book in .NET to demonstrate the power of N-tier application architecture. Complete source code included! [Read This Article][Top]
Learn about N-tier application architecture and realize that developing with multiple layers produces a flexible and reusable application for distribution to any number of client interfaces. [Read This Article][Top]
Learn about N-tier application architecture and realize that developing with multiple layers produces a flexible and reusable application for distribution to any number of client interfaces. [Read This Article][Top]
Mailing List
Want to receive email when the next article is published? Just Click Here to sign up.