Tutorial 11 - Form ValidationTutorial 10 - Menuing Systems - Tutorial 12 - Smart Forms Validation routines test for required strings whether a specific value, a range of accepted values or a pattern of an accepted format. Validation is required in forms, whether fill-in or smart forms and also in routines that manipulate data. Testing for valid numerics and whether the numeric is in a required range is also a part of data validation. The best method of form validation is to choose form controls that restrict value selection to known pretested quantities. Examples of these controls are radio buttons, check boxes and select lists. However there are times when they are not always appropriate. In these cases you can let the user complete the form and then validate it or validate on each individual entry. Common Validations NeededThere are many types of common validations that you should be ready to do on a form. These checks include:
However do not make any false assumptions in what the entry will be. Assuming that age:12 children:3 is in error may require checking the state address ;-] ;-] Common mistakes seen on some entry forms are:
Validating Before Form SubmissionThe onSubmit event can be used to call a function to check all fields that require validation before sending a form. The values to be checked (or perhaps the entire form) are passed as parameters. The validation function must return a true if ready to submit or a false if not ready. It also makes sense to use dialog boxes to indicate the nature of the error. An example of a simple call to a validating function is: <form id="SurveyForm" action="http://www.flintstone.ca/survey/"
method="post" onSubmit="return validate(fld1,fld2);"></form>
An alternative method uses a simple button with an onclick event. Either the submit action is suppressed by placing onSubmit="return false;" in the form element or removing the form element altogether! <form id="foo" action="?" method="post" onSubmit="return false;"> . . . <input value="Check Form!" onclick="validate(fld1,fld2);" /> </form> Validating On A By Entry BasisMany forms are best validated on a by entry basis. A function to validate
the contents of an entry box can be called by the onBlur event.
onBlur occurs whenever an element such as an entrybox loses focus.
That means the entry is checked when you click on a new entry field or
another spot in your window or use the tab key to move off the entry. <form id="pass" action="" method="post" onSubmit="return false;">
<p>Input the word STOP in the following entry box:<br>
Then click somewhere outside of the box to test!
<input id="i1" type="text" value="" onclick="return false;"
onBlur="isit('i1','STOP'); return true;"></p></form>
And here is the JavaScript checking routine. Note that the validation is case sensitive. The onSubmit event in the form element is used to suppress the return key and the onclick event suppresses other key clicks. function isit(id,expectedval) {
inputval=document.getElementById(id);
if (inputval!=expectedval) {
alert('You must enter the word '+ expectedval);
} else {alert('ok')}
}
Validating On A Keystroke BasisSometimes you may want to restrict invalid characters from being entered into a control or do some form of on-the-fly reformatting. This requires catching individual keystrokes with the onKeyPress event. An example of this is: document.onkeydown=keyHit; // register key pressed event
upArrow=38; dnArrow=40; // names for important keys
function keyHit(evt) {
thiskey=window.event.keyCode;
if (thiskey==upArrow) {alterSelection(-1)}
if (thiskey==dnArrow) {alterSelection(+1)}
}
Notice that instead of using an element attribute, the event is registered in JavaScript. The evt object can be tested if you need to restrict keystrokes to specific zones or elements. You can use an alert(thiskey) method to show the specific keyCode. It helps to make a name synonym for any keyCode that is being used such as pound or percent. Brute Force ValidationBrute force evaluation is programming that takes the simplest approach or uses very crude assumptions. It is easy to get the code in place and most often does the job. Stepwise refinement can then be applied. But the resulting code is not elegant and often quirky. As an example suppose that a field is intended to hold a person's surname and is a mandatory field. The first approach is to check for an empty string. That is a start but surely a person's last name is at least 2 characters long. And only a few punctuation symbols (such as hyphen and apostrophe) are allowed and no digits please! There are several String object functions and properties that can make your brute force checks easy! You may want to refer to Appendices - Objects for the complete list.
Validation with regular expressions is more elegant and much easier than the brute force technique, once you master the syntax. If your scripts rely heavily on input validation, it is well worth the effort to learn how to use them. E-mail Address ValidationA good example of brute force validation is checking an e-mail address. The first version would check for the @ symbol. Refinements would check for at least one dot after the @ and characters before, between, and after the symbols. Further refinement would find the last dot and make sure that there is at least two alphabetic characters after it. Very thorough validation would check any two character final character combination (Top Level Domain or TLD) against a list of valid ISO country TLD's. Also one should scan for illegal punctuation never found in e-mail addresses. An example of a brute force email entry field test routine (some but not all of the possible checks!) can be found here. You can use it as a good start for your own validation routine. Validation with regular expressions is much easier. If your scripts rely heavily on input validation, it is well worth the effort to learn regular expression syntax. Postal Code ValidationAnother example of brute force validation is checking postal codes. As each country has their own format, you should use the country address value to select the required validator function. As an example of how a postal code validator function is constructed, first review Canada's Postal Code rules:
function isPostCode(entry){ // CANADIAN CODES ONLY
strlen=entry.length; if (strlen!=6) {return false}
entry=entry.toUpperCase(); // in case of lowercase characters
// Check for legal characters in string - note index starts at zero
if ('ABCEGHJKLMNPRSTVXY'.indexOf(entry.charAt(0))<0) {return false}
if ('0123456789'.indexOf(entry.charAt(1))<0) {return false}
if ('ABCDEFGHJKLMNPQRSTUVWXYZ'.indexOf(entry.charAt(2))<0) {return false}
if ('0123456789'.indexOf(entry.charAt(3))<0) {return false}
if ('ABCDEFGHJKLMNPQRSTUVWXYZ'.indexOf(entry.charAt(4))<0) {return false}
if ('0123456789'.indexOf(entry.charAt(5))<0) {return false}
return true; }
Once again validation with regular expressions is much easier, once you master the syntax. If your scripts rely heavily on input validation, it is well worth the effort. Password Controlled PagesOne common validation is requiring a password to enter a page. Use of a password control box on the form and its value within the JavaScript function are all that is required. The html fragment is: <fieldset><legend>Test Form</legend>
<label for="pw">Password:</label>
<input id="pw" type="password">
<input id="act" type="button" value="View Utilities" onClick="doPw('pw');">
</fieldset>
And here is the JavaScript function. Note that to be of any value both the comparison value and the referenced page must be encrypted. FlashPeak offers CryptHTML for encoding html and javascript documents. Another more expensive solution is invisitec.com. function doPw(objectId) {
entry=document.getElementById(objectId).value;
if (entry=="test") {
top.location.href="http://home.cogeco.ca/~ve3ll/utility.htm";
} else {
alert("Sorry - You must sign agreement to access utilities");
}
}
|