| Even though you need server-side coding to process form data, you can use good old client-side scripting to review the visitor's submission before it goes to the Web server. This process is called validation, and it's a very good idea for most types of forms. A validation pass helps to prevent errors, both intentional and accidental, from confusing or crashing the server-side code that eventually receives the form data. Say your form asks visitors to supply an email address so that the server-side form handler can send out a confirmation email. Obviously, you need the visitor to supply an email address, or the server-side code won't work right. If someone out there gets clever and tries to leave the field blank or types in something other than an email address, the validation script catches it and asks for a correction. Of course, the visitor could still supply an invalid email address, but at least the validation script screens out a good chunk of potentially bad data. GEEKSPEAK Validating form input means reviewing it for accuracy before sending it off to the Web server. |
Any validation script requires close coordination with the structure of the form. And since no two forms are alike, there's no such thing as an all-purpose, one-size-fits-all validation script. For this reason, the Toolkits in this topic aren't like the others in this book, in that you don't just copy the code to your Web site. You start with the Validation Script Skeleton instead, and then you pick from the rest of the Toolkits, adding the validation features that you need for your particular form.  | TOOL KITValidation Script Skeleton This Toolkit contains the skeleton for a form validation script. By itself, it doesn't validate anythingyou need to add other blocks of code for that. The other Toolkits in this topic give you the actual validation routines. Pick and choose the ones you need, and add them to this framework. [View full width] <script language="JavaScript"> /* If you're adding this script to an external JavaScript file,  you don't need the script tags at the beginning and end of this listing. If you're embedding the script on a Web page, make sure it's the same page that contains the form. */ function validateForm() { /* Add components from the other Toolkits here. */ return true; /* Assuming the form data passes all validation checks, the above command gives the go-ahead for the browser to submit the form to the Web server. */ } </script>
You need one more thing besides this framework for the validation function: a form that runs the script upon submission. Add the onSubmit event to the form tag, like so: [View full width] <form name="formname" action="formaction" method="formmethod" onSubmit="return validateForm();">
Of course, you should insert the appropriate values in the name, action, and method attributes for your particular form. |
|
| TOOL KITVerifying an "I Agree" Checkbox Add this block of code to the validation script to verify that the visitor has checked an "I Agree" checkbox, like when the visitor has to agree to the terms of service or your privacy policy or what have you. [View full width] if (document.formname.checkboxname.checked == false) { alert("You must agree to proceed."); return false; } /* The if/then block above looks to see if the checkbox is checked. If not, the browser displays an alert message and stops submission. Replace formname with the name of the form, and replace checkboxname with the name of the "I Agree" checkbox. */
|
|
|
