|
Home | Uniquely NZ | Travel |
|
|
Web Site Design
Form Validation |
Introduction
Forms are very useful on a Web Site and are almost mandatory for a business site. Initialy they will be used for enquiries and latter on for orders to be placed. A major issue is checking that all the required fields are filled in. This is best done at the time the form is submited but before the page is left. This ensures that none of the input is lost as can occur if the checks are done at a latter stage. JavaScript is the obvious way and progress is such that most browsers will now have JavaScript enabled. For those without JavaScript enabled some superficial checks on, for example, email addresses should still be carried out.
The following code snippets have been put together to check an email address has been given so one can reply and to trap submissions before the sender has filled in a manditory field or has put just spaces to fool you. It works by calling a validation routine when the form is submited. The onSubmit event handler checks the various fields and a return value of true allows the submit to continue or false leaves one on the page. This version generates an alert in the checking routine if there is a problem. A further problem is not found until the next submission. The JavaScript routines are loosely based on work by McFedries.
JavaScript Snippets to cut and paste for checking a form has a valid email field and that one or more fields have visible characters present
// Simple check for valid Email address in string
function valid_email(email_address) {
if (email_address.length < 7) {return false};
at_location = email_address.indexOf("@");
dot_location = email_address.lastIndexOf(".");
space_location = email_address.lastIndexOf(" ");
if; (at_location == -1 || space_location > 0 || dot_location == -1 || at_location > dot_location ) {return false};
if; (at_location == 0) {return false};
if; (dot_location - at_location < 3 ) {return false};
if; (email_address.length - dot_location < 3) {return false};
return; true
}
//Check for empty or only non visible characters in string
function its_not_visible(string_value) {
var not_visible = " \n\r\t"
for (var counter = 0; counter < string_value.length; counter++)
{current_char = string_value.charAt(counter)
if (not_visible.indexOf(current_char) == -1) {
return false
}
}
return true
}
//Submit handler can be extended to many more fields
function submit_handler() {
if( its_not_visible(document.forms[0].commentbox.value) ){
alert('You have not entered anything into the message!');
document.forms[0].commentbox.focus() ;
return false
}
if( valid_email(document.forms[0].email.value) ) {
return true
}
else {
alert('Please enter a valid email address so I can reply \n Hint: Check for leading or trailing spaces');
document.forms[0].email.focus() ;
return false
}
}
//-->
</script>
The code above should be in the head and the submit_handler() function is called as below. Note the return is essential in the onSubmit="return submit_handler().
<FORM METHOD=POST ACTION="http://www.yoursite.com/scripts/form_response.ihtml" onSubmit="return submit_handler()">
The code can be copied and pasted If you copy by hand beware as it is impossible to tell 2x single quotes '' from a double quotes " in many character sets.
The following is a "do nothing" test so it is safe to try it with the submit button.
