Developing HTML forms for entering or editing data on line is tedious and boring work. It is even more painful if you need a data-entry solution that supports both Netscape and Internet Explorer (IE). Thus most on-line forms have no JavaScript validation and barely any server validation.
FormLib is a code framework that eliminates the tedious aspects of programming cross-browser client and server-side validation of input forms. This framework generates the validation code directly from the database structure and auto-fills the fields when editing an existing record. To use this framework one needs only to include one JavaScript and one ASP file into the page and have the form post the results to itself. FormLib simplifies form creation and eliminates common forms-maintenance tasks.
The benefits of this approach will be clearer with an example. (Click to link to a sample form window.)
Try changing values and notice the validation and in-field formatting of date, money, and phone fields. View the source to see the embedded validation code.
The ASP code that produced this form is listed below.
Code
<!--#include file="FormLib.asp"-->
<%
PageNoCache
ID=1*("0"&Request.QueryString("ID"))
Action=ucase(Request.QueryString("Action"))
set RS=ConnectToDB("Select * from PhoneBook where PhoneBookID=" & ID)
if Action="SAVE" then
ErrMsg= ValidateSQL(RS,"PhoneBook","")
if 0=len(ErrMsg) then
ID=AddNewRecord(RS,"PhoneBook","PhoneBookID","")
ConnectToDB(BuildSQL(RS,"PhoneBook","PhoneBookID=" & ID))
Response.Redirect("NextPageInSequence.asp")
else
ErrMsg="<b>Warnings & Errors:</b>" & ErrMsg
end if
end if
%>
<html>
<head>
<title>PhoneBook Form</title>
<script language="javascript" src=FormLib.js></script>
<script language="javascript"><!--//
function CustomValidation(FormObj){return(true);}
//--></script>
</head>
<body bgcolor=white>
<form METHOD="Post" ACTION="FormPage.asp?Action=Save&ID=<%=ID%>"
name=ContactForm onSubmit="return FormValidation(this)">
<table cellspacing=0 cellpadding=0 width=400 border=0>
<tr><td colspan=3><font color=red><%=ErrMsg%></font></td></tr>
<tr><td><%=CheckBox(RS,"Status","Y","N")%> Active</td>
<tr><td>Name:</td>
<td><%=TextInput(RS,"FirstName",20,"")%></td>
<td><%=TextInput(RS,"LastName",15,"")%></td></tr>
<tr><tr><td>Address:</td>
<td colspan=2><%=TextInput(RS,"Address",40,"")%></td></tr>
<tr><tr><td>City/State/Zip:</td>
<td colspan=2>
<% StateList=GetOptionList("","Select Abbrev from State")
Response.write TextInput(RS,"City",21,"") &_
OptionList(RS,"State",StateList,1) &_
TextInput(RS,"Zipcode",10,"notempty")
%> </td></tr>
<tr><tr><td></td>
<td>Home:</td>
<td>Work:</td></tr>
<tr><td>Phone:</td>
<td><%=TextInput(RS,"HomePhone",15,"Phone")%></td>
<td><%=TextInput(RS,"WorkPhone",15,"Phone")%></td></tr>
<tr><tr><td>Email:</td>
<td colspan=2><%=TextInput(RS,"Email",40,"email")%></td></tr>
<tr><td>Order Date/Amt:</td>
<td><%=TextInput(RS,"LastOrderDate",10,"")%></td>
<td><%=TextInput(RS,"LastOrderAmount",12,"")%></td></tr>
<tr><td colspan=2 align=right>
<input type=submit name=go value=Save></td></tr>
</table>
<br>
</form>
</body>
</html>
<%CloseRS(RS)%>
How Does It Work?
Each of the input functions (e.g., TextInput, OptionList, and CheckBox) uses the information provided in the recordset object to output not only the HTML for input controls, but also the JavaScript validation code. The JavaScript code is placed in line with the HTML code. The in-line code is terse since it calls general validation routines stored in the JavaScript include file. Since the bulk of the validation routines is cached in the include file, form pages using this library are slimmer and load faster than typical forms.
The onChange handlers for each input control are set so that validation is done immediately on data entry. During the validation the fields are reformatted with decorations. Dashes are added to phone fields, comma separators are added for large numbers, and dollar signs preceed money values. Textarea fields are checked to ensure that the user hasn't filled the control with too much text. The onSubmit handler repeats each of these validation routines in case the user ignores immediate validation warnings or forgets to fill in required fields.
The server-side validation code is also auto-generated from the recordset when the form is posted back to itself. If errors are detected, the data saving is aborted and the form is redisplayed with the error text. The input controls are auto-filled with the value just posted and not the original value found in the database so the user can correct mistakes and repost.
When the data is valid, the framework builds an SQL expression that updates the database. The SQL that is generated eliminates problems with single quotes in text fields, invalid dates in date fields, numbers too big for integer fields, or text strings too long for the database field. This eliminates the most common bugs found in custom-developed forms. If the entry is for a new record, it is automatically inserted before applying the update.
To handle validation cases that are not apparent from the database structure, the forms programmer can add validation logic to a CustomValidation function that is executed both on the client and the server. Advanced programmers can extend the library by supplying regular expressions as field validation code.
Here is a link to a downloadable zip file containing a complete example of the Myers FormLib,along with the source code for the ASP and JavaScript include files. Unpack the files into a PWS directory and then use your browser to display FormLibExample.asp. The example page illustrates using FormLib to build forms that contain data from multiple tables. It shows how to handle designs that use a primary table, a secondary category table, and a join table that matches a record in the primary table in a one-to-many relationship with the category table.
discuss this topic to forum
