The e-gateway application performs only minor form validation when data is submitted to it; it checks that data has been submitted (it can't process an empty form) and that all the "required" fields have been completed. All other validation should be performed by the client browser (using JavaScript for example) before data is passed to e-gateway. There are two reasons why we have designed e-gateway to work this way:
- every form is different and the validation required for each form is wildly varied. Consequently, it would be extremely difficult for us to encode every possible validation procedure within e-gateway itself and e-gateway would become much more difficult to develop for as a result
- there are obvious performance benefits in reducing server load by pre-processing within the users' browser prior to sending data to e-gateway
For the purposes of this document we rely exclusively on JavaScript to illustrate validation techniques; however, you should be able to use any other client-side technology.
JavaScript code should be located within the "<Head> ... </Head>" tags of your HTML document. The following example illustrates how the embedded JavaScript should be coded:
<Script Language="JavaScript">
<!-- Disable JavaScript for non-compliant browsers...
function validate() {
[JavaScript source code goes here]
return true;
}
//-- end of embedded JavaScript... -->
</Script>
The "<Form>" tag should then call the "validate" function when data is submitted. We accomplish this with the following:
<Form Method="Post" Name="unique_form_ID" Action="cgi-bin/mail_gateway.pl" OnSubmit="return validate();">
The significant code in the line above reads OnSubmit="return validate();", this works exactly as it reads: when this form is submitted (OnSubmit) run the JavaScript function called "validate" (which you have programmed in the document header as described above).
To illustrate all of the possible validations you might wish to perform is beyond the scope of this document. However, we have included some common examples below that you should be able to modify to meet your requirements. For more information about JavaScript, refer to Netscapes' Online Documentation at: http://developer.netscape.com/docs/manuals/communicator/jsguide4/index.htm
Note: In all of the examples given below you should replace "unique_form_ID" with the name you have given your form (see the <Form> tag example above) and adjust the field names to match the corresponding fields on your form.
- ensure that all "required" fields have been completed. e-gateway checks this too, but it's more efficient to perform this check on the form itself:
/* Ensure all the required fields have content... */
if ((document.unique_form_ID.name_id.value == "") || (document.unique_form_ID.email_id.value == "") || (document.unique_form_ID.message_id.value == "")) {
alert ("You haven't completed all the required fields\nAll required fields are marked with an asterisk (*).");
return false;
}
- ensure that the user hasn't entered any illegal characters in a given field (for example, a name would not have numeric characters in it):
/* Ensure that only valid characters are used in the "name_id" field... */
var num = " .-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
for (var intLoop = 0; intLoop < document.unique_form_ID.name_id.value.length; intLoop++) {
if (-1 == num.indexOf(document.unique_form_ID.name_id.value.charAt(intLoop))) {
alert ("You have used illegal characters in the \"name\" field \nOnly a-z (upper or lower case), space, \".\" and \"-\" are permitted.");
document.unique_form_ID.name_id.focus();
return false;
}
}
- ensure that the user has entered a valid e-mail address. This is often critical to the success of e-gateway as it can't return e-mails to the user if they get this wrong:
/* Validate the e-mail address... */
if ((document.unique_form_ID.email_id.value.indexOf('@', 0) == -1) || (document.unique_form_ID.email_id.value.indexOf('.', 0) == -1)) {
alert ("You have entered an invalid e-mail address.\nYour e-mail address should be something like: myname@myhostdomain.com");
document.unique_form_ID.email_id.focus();
return false;
}
var iChars = "*|,\":<>[]{}`\';()&%";
for (var i = 0; i < document.unique_form_id.email_id.value.length; i++) {
if (iChars.indexOf(document.unique_form_id.email_id.value.charAt(i)) != -1) {
alert ("You have entered an invalid e-mail address...\n(the address you have entered contains illegal characters).\n\nAn e-mail address should look something like: myname@myhostdomain.com");
document.unique_form_ID.email_id.focus();
return false;
}
}
With JavaScript v1.2 we can validate e-mail addresses with even greater precision:
<Script Language="JavaScript1.2"><!-- Hide from non-JavaScript aware browsers...
/* Form validation... */
function validate() {
/* If an e-mail address has been entered, check that it's valid... */
if (document.unique_form_id.email_id.value != "") {
if (document.unique_form_id.email_id.value.search
(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1) {
return true;
} else {
alert ("You have entered an invalid e-mail address...\n(the address you have entered is incorrectly structured).\n\nAn e-mail address should look something like: myname@myhostdomain.com");
return false;
}
}
}
//-- Stop hiding... --></Script>
- validate a telephone number:
/* Validate a telephone/fax number... */
var num = "0123456789()- +.";
for (var intLoop = 0; intLoop < document.unique_form_ID.telephone.value.length; intLoop++) {
if (-1 == num.indexOf(document.unique_form_ID.telephone.value.charAt(intLoop))) {
alert ("Validation Failed: Please enter a valid telephone number...\n\nOnly the digits 0-9 and a few special characters are valid!");
document.unique_form_ID.telephone.focus();
return false;
}
}
|