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)
To see many useful demos of InfoFind Web Tools and to have all versions including InfoFind_Lite then click here to download InfoFind Web Tools, demo files, and documentation.

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 2011 so please check back later.

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.

CSS Form Validation
Number (50 To 100) *
Decimal Number (50 To 100) *
Number (Any Size)*
Number - Byte
Number - 16-Bit
Number - Unsigned Short
Number - 32-Bit
Number - Unsigned Int
Number - Float
Number - 64-Bit
Number - Unsigned Long
Number - Double *
Currency *
JavaScript Date
Date Range (-30 Days to 30 Days)
Short Date
Short Date & Time
Email

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.