- The Challenge: Checking User Input in Real Time
- The Design: Designing a Validator Application
- Putting Together the Validator Application
- Testing Validator
- Giving Validator an Extreme Ajax Makeover
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Giving Validator an Extreme Ajax Makeover
The Validator application is one of the more immediately applicable examples in the book because intelligent data entry is a common need. The validatekit.js file offers functions for common data types that are often used in data entry forms. The first way to expand upon the Validator example is to apply the validation functions to your own user-input forms. This is as easy as importing the validatekit.js file into your pages via the following <script> tag:
<script type="text/javascript" src="validatekit.js"> </script>
Then code the HTML elements for validation by calling the appropriate validation function and passing along the IDs of the HTML elements. As an example, if you wanted to validate the age of a person to make sure it is an integer number, you might create the following text box and help field:
<input id="age" type="text" size="4"
onblur="validateInteger(this,
document.getElementById('age_help'))" />
<span id="age_help" class="help"></span>
You don't have to associate a style class with the help text, but it does make the user interface look a little better. Here's an example of a help style that you can use to dress up the help fields:
<style type="text/css">
span.help { color:#AA0000; font-style:italic; }
</style>
Keep in mind that this style must be placed in the head of the Web page, which is also where the <script> tag you saw a moment ago must be placed. This style just makes the help text italicized and red. You can easily add on more styles or tweak these to get a different look.
The one problem with this age validator is that it doesn't account for the user entering an age that doesn't make sense. For example, because the validation only checks to see if the input is an integer, no help text is displayed if the user enters an age of -5 or 212. And until someone uncovers the fountain of youth, an age much over 100 can probably be considered invalid. You could account for negative ages by possibly creating a whole new validation function that only allows positive integers, but in this particular case a range validation makes more sense.
The age range validation is responsible for first checking that an input value is an integer, and then further checking to see if the integer is within an acceptable range, such as 1 to 120. Following is how you might put together a validation function to carry out this task:
function validateAge(inputControl, helpControl) {
// First see if the input value is an integer
if (!validateInteger(inputControl, helpControl))
return false;
// Then see if the input value is in the prescribed range
if (inputControl.value < 1 || inputControl.value > 120) {
if (helpControl != null)
helpControl.innerHTML = "Please enter an age in the
range 1 - 120.";
return false;
}
else {
if (helpControl != null)
helpControl.innerHTML = "";
return true;
}
}
Notice that this function first calls the validateInteger() function to check and make sure the input is indeed a valid integer. There's no sense in moving on to the range check if the input isn't an integer. If the input is an integer, a range check is performed. The result of the range check is to simply set or clear text in the help control. The help control is checked for a null value in the event that you forget or decide not to include a help control, in which case you don't want an error to occur.
Even if your JavaScript experience is shaky or nonexistent, you should be able to isolate the key part of the validateAge() function and modify it to fit your needs. For example, you can change the range of the validation check by simply changing this line of code:
if (inputControl.value < 1 || inputControl.value > 120) {
Let's say you want to validate an NFL (National Football League) quarterback rating, which must be in the range 0 to 158. Here's how you would change the range-testing line of code:
if (inputControl.value < 0 || inputControl.value > 158) {
Hopefully you can see that crafting your own validation functions out of the base set I've provided isn't terribly difficult.
It's also possible to extend the Ajax-style validation employed by the Validator application in looking up the city and state of a ZIP code. For example, a popular Ajax validation is to check a database of user names to ensure uniqueness when registering a new user. In this case, you would issue an Ajax request to your server script that passes along the user name entered, and the server script then checks the name against a database of existing user names to see if it is unique. The response could be as simple as "yes" or "no" for the uniqueness validation. So the client just needs to look at this result and display a help message accordingly.
The point to this makeover discussion is that I've really only exposed the tip of the iceberg in terms of data validation and Ajax. It's up to you to take what you've learned and the code I've provided to further expand on the validation techniques as needed.