How to validate web forms using CSS Styles with InfoFind Web Tools
About InfoFind Web Tools
InfoFind Web Tools is for web page designers and developers and it is completely free to use in commercial or open source products and for either business or personal web pages. It contains several JavaScript Files that help make web pages more interactive. Many of the features can be used without having to write any JavaScript code and it is designed to work with all popular browsers on Windows, Mac, and Unix/Linux. Some of the features of InfoFind Web Tools include:- HTML Table Sorting
- Animated Picture Slide Shows
- Web Page Animation
- Advanced Form Validation
- Functions for working with Data Types (Strings, Numbers, Currency, etc)
- Functions for working with Web Pages, CSS Scripts, and Individual Elements
- Page Updates through Web Requests (AJAX)
Special Notice – InfoFind Web Tools is focused on web application development such as database applications. InfoFind Web Tools does have some animation features but if you are looking only for animation scripts or larger control libraries you might want to check out one of the following JavaScript Libraries (script.aculo.us, scripty2, jQuery, MooTools) or JavaScript Frameworks (Yahoo YUI, BBC Glow, Microsoft ASP.NET AJAX Control Toolkit). InfoFind Web Tools is written in a way so that is it easy to modify and copy individual functions that you need for your applications. Many updates will be coming in late 2010 or 2011 so please check back soon.
Working with Web Forms
InfoFind Web Tools has many functions for easily working with Web Forms. This includes functions for reading/writing to controls and functions for automatically validating a wide range of data types without having to add any JavaScript to the web page.To add validation to a form you can either call a JavaScript function or add the style “ValidateForm” to the CSS class of the form:
<form method="post" name="Form1" class="ValidateForm" action="...Then to validate the actual fields you can add one of many validation rules as a CSS class. For example to validate a required entry with a numeric range of 50 to 100 and without decimal numbers you could use the following classes.
<input type="text" class="ValidateNumber_50_100 ValidateWholeNumber IsRequired"
Sample Web Form
The sample web form below provides an example of all validation rules. To test each rule click [Submit] at the bottom of the form, and then to fix each error click on the [Fix] button next to the control that you want to fix.List of Validation Rules
The table below provides a full list of all validation rules.| Rule | Description |
|---|---|
| ValidateNumber_XX_XX | Validate a numeric range. For example to validate between 1 and 100 enter ValidateNumber_1_1000. |
| ValidateDate_XX_XX | Validate a date range. The validation is in days from today so to validate for -30 Days to +30 Days from today add the enter ValidateDate_30_30. |
| IsRequired | Validate that the something is entered. If this is not included then the entry can be blank. |
| ValidateNumber | Validate that a number has been entered. The format of number used can be changed through JavaScript with the property [InfoFind.DataTypes.NumberType]. |
| ValidateWholeNumber | Validate that a whole number (no decimal places) has been entered. |
| ValidateNumberByte | Validate for a byte number - Range = 0 To 255 |
| ValidateNumber16Bit | Validate for a 16-bit number - Range = -2^15 To 2^15-1 |
| ValidateNumberUShort | Validate for an Unsigned 16-bit number (No negative) - Range = 0 To 2^16-1 |
| ValidateNumber32Bit | Validate for a 32-bit number - Range = -2^31 To 2^31-1 |
| ValidateNumberUInt | Validate for an Unsigned 32-bit number (No negative) - Range = 0 To 2^32-1 |
| ValidateNumberFloat | Validate for a single-precision floating-point number. Approximate range is 10^-38 To 10^38 with accuracy of about 7 digits. |
| ValidateNumber64Bit | Validate for a 64-bit number - Range = -2^63 To 2^63-1 Note - JavaScript does not usually support high-precision 64-Bit Numbers so the actual validation will probably be from -9223372036854776000 to 9223372036854776000. The browser will round the numbers as needed. |
| ValidateNumberULong | Validate for an Unsigned 64-bit number (No negative) - Range = 0 To 2^64-1 Note - JavaScript does not usually support high-precision 64-Bit Numbers so the actual validation will probably be from 0 to 18446744073709552000. |
| ValidateNumberDouble | Validate for a double-precision floating-point number. This is the largest number that JavaScript currently supports. Approximate range is 10^-323 To 10^308 with accuracy of about 15 digits. |
| ValidateCurrency | Validate that a currency has been entered. The type of currency used can be changed through JavaScript with the property [InfoFind.DataTypes.NumberType]. |
| ValidateDate | Validate that the value is a valid date for Javascript. |
| ValidateDbDate | Validate that the value is a valid short date. Example of Valid Dates: 1/1/08 or 01-01-2008 |
| ValidateDbDateTime | Validate that the value is a valid short date and time. Example of Valid Date/Times: 1/1/08 2:00 PM or 01-01-2008 14:00 |
| ValidateEmail | Validate that a email address has been entered. |