[wpdm_file id=1]
Advantages of using Validator
Validator is a easy to use form validation tool. If your client machine has JavaScript enabled, it will capture almost any kind of Form Validation you might need. Some basic benefits of Validator are:
- Do not have to know JavaScript
- 23 different validation rules to test against!
- Validates different types of input forms, not just text and text areas.
- Maintains separation of content, display, and interaction on the web page.
- External JavaScript file so it can be cached and used on multiple pages efficiently.
- Tested on Fire Fox 2, IE 6, and IE7. (Should work on others as well.)
- Customizable error messages by setting attributes.
- Customizable error messages by using CSS styles.
These will allow you to validate your forms quickly, easily, and reduce the time and effort you have to put into building your own validation techniques.
Documentation:
Using the form Validator is a simple process. Follow these simple steps to validate your forms.
- Add the script to your web page.
Note: you may need to adjust the src attribute if you place your JavaScript files within a sub-directory. - If you want to validate your form fields in real time, then you must call the initializeValidator function when the page finishes loading. If you do not have any additional scripts to initialize you can load the script by using the body’s onload event handler, as shown here:
<body onload=”initializeValidator()”>
- If you wish to validate all at one time, you do not have to initialize the Validator. You can instead utilize the onsubmit event handler for the form you wish to validate and get the value of the validatorCheckForm function.
<form … onsubmit=”return validatorCheckForm(this);”>
- Add the different types of validation checks to the forms fields you want to check against by adding the correct attribute to the form field.
Validation Checks
List of different validation checks you can run:
- autotrim – trims the field of leading and trailing white space(s). This does not generate an error message; it will only trim the offending white spaces. The trim attribute may be used in conjunction with many other Validator attributes.
<input name=”email” id=”email” autotrim=”true” />
- required – requires that the field have a value (not be left blank). This is the most common used property. It will check to make sure that white space has not been added to the form field to “fake” out Validator, but it does not save the trimmed value. The required attribute may be used in conjunction with many other Validator attributes.
<input name=”email” id=”email” required=”true” />
- email – makes sure the input form field is an e-mail. This uses regular expression to capture over 95% (guess – probably) of all valid e-mail addresses. There are some that may not go through, or some that may get through that are not valid. Likewise, this is looking mainly for address format, not an actual valid e-mail address.
<input name=”email” id=”email” email=”true” />
- maxlen – makes sure that there are no more characters used than the value for the maxlen attribute. Works well if the data is to go into a text field within a database that can only store a certain number of characters (such as a varchar or char). The following example would generate an error if the number of characters in the text field was more than 96 characters.
<input name=”email” id=”email” maxlen=”96″ />
- maxval – similar in some ways to maxlen. However, instead of looking for a number of characters, it is looking for the maximum numeric value. This is good for error checking, such as looking for a number less than 100. Supports integers and floating point numbers.
<input name=”completed” id=”completed” maxval=”100″ />
- minlen – Makes sure that a input field is a minimum number of characters. Good for looking for strong passwords or user names that have a minimum number of characters.
<input name=”password” id=”password” minlen=”6″ />
- minval – The opposite of maxval. Ensures that the field value is greater than a certain value.
<input name=”completed” id=”completed” minval=”10″ />
- notfirst – To be used on select tags where you want to make sure the value is not the first one in the list.
<select id=”mood” name=”mood” notfirst=”true”>
<option>Pick your mood</option>
<option>Happy</option>
<option>Sad</option>
</select> - maxwords – The maximum number of words that can be contained within a field.
<textarea id=”essay” name=”essay” maxwords=”1000″>
- usphone – Makes sure that the inputted value is a United States style phone number. This supports numerous styles of formatting. Correctly formatted phone numbers will appear like:
- 407-555-1234
- 407.555.1234
- 407 555 1234
- (407)555-1234
- (407) 555-1234
<input type=”text” id=”phone” name=”phone” usphone=”true” /> - zipcode – Checks the field to see if the zip code is a US style postal code. Supports both 5 digit and 9 digit postal codes.
- 32712
- 32712-1234
<input type=”text” id=”zip” name=”zip “zipcode=”true” />
- uscurrency – Checks to see if the value within the field is a valid US Currency format. It must start with a $, and have a numeric value. It optionally may have a decimal and two numeric digits after the decimal. Valid examples are:
- $5
- $5.32
<input id=”price” name=”price”uscurrency=”true” />
- ssn – Checks to make sure you have a valid Social Security Number formatted input field. Note that this does not check to see if the Social Security Number is actually valid. Valid results are:
- 123-45-6789
- 123 45 6789
- 123456789
- time –makes sure you get a valid time format. Works for the 12 hour time clock display. Acceptable time formats include:
- 9:45
- 9:45 am
- 9:45 AM.
- usdate – checks for a valid US formatted date. Generally it is best to have users enter this from a calendar control however to ensure conformity to the system format that you are looking for, especially if it is to go into a database. Valid date formats include:
- 6/7/2007
- 06/7/2007
- 6/07/2007
- 06/07/2007
- 6/7/07
- 06/07/07
- internationaldate – similar to the US formatted date, however, it allows the year to be put first, in either a 2 or 4 year digit format. Generally it is best to have users enter this from a calendar control however to ensure conformity to the system format that you are looking for, especially if it is to go into a database.
- alphanumeric – the field entries must contain letters and numbers only – no special characters.
- numeric – the field must be numeric. No letters or special characters can be included.
- alpha – only letters may be accepted.
- regex – you may pass your own regular expression to be tested against.
<input id=”letters” name=”letters”regex=”/^([a-zA-Z])*$/ ” />
- numgt – the field must be greater than the field who’s value is passed through the attribute. This is good if you need to have someone enter two numbers, with one greater than the other, such as a range between two values. It will only look for numbers, so if you are looking for a price range, make sure that the user doesn’t enter a currency or any commas, etc.
<input id=”highTemp” name=”highTemp “numgt=”lowTemp” />
- numgte – very similar to numgt, but it allows the two fields to be equal.
Defining Error Messages with Validator
Standard, and relevant error messages are defaulted with Validtor. However, one can also customize the error messages that are created with Validator. As with the validation checks, the errors messages are customized with attributes for the error message, as well as how the error messages are to be displayed. All of these attributes are optional.
- popup – popup has two possible values. If pop-up is not used, it will only display and error message on the screen.
- only– when the only value is used, a pop-up message will display the error message.
- both– when the both value is used, a pop-up message will display, and the screen will hold and error message.
- errmsg – the errmsg attribute is used as an error message for any validation errors where a specific error message for the validation is not used. If this error message is defined, then the value is displayed either on the screen or in the pop-up window. If this is not defined, the standard error message is used. This is per input field, so each field can be specific if necessary.
<input type=”text” required=”true” id=”musthave” errmsg=”Just give me a good answer” />
- <validation check>errmsg – if you prefix errmsg with the validation check, you can write a custom error handler for that specific validation error. If a custom validation check error does not exist, then a generic errmsg is checked for. If that fails, a generic default error message is displayed.
<input type=”text” required=”true” id=”musthave” requirederrmsg=”Just give me an answer” />
Samples:
Validator Test 1 – This test shows the Form Valiator being used in a CSS layout based form without tables. It will only inform users of the problems, it does not prevent them from submitting the form. (Updated 22 October 2007)
Validator Test 2 – This test shows the Form Valiator being used in a fairly standard table based form. It uses several different validation techniques from the first Form Validator example, including the notfirst, for the select field, the matches to ensure two values that match, and more. The Form Validator test also shows the use of the pop-up window to make sure the user is alerted right away. It shows both values for the popup attribute, only (where only a pop-up is displayed) and both (where the regular error message, and the pop-up are both displayed). This test also prevents the user from continuing with an improperly filled out form. (Updated 22 October 2007)
JavaScript Form Validator was originally found on Access 2 Learn
