Upload
chrystal-simpson
View
220
Download
0
Tags:
Embed Size (px)
Citation preview
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Verifying SubmittedForm Data
with JavaScript
Instructor: Joseph DiVerdi, Ph.D., MBA
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Introduction
• One of the Most Important Uses of JavaScript– Performed Using HTML Event Handlers – Together With JavaScript Functions
• Verification of Form Data Prior to Submission– Important Because
• Preserves Internet Bandwidth• Saves Viewer Time• Good Excuse to Learn JavaScript
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Ice Cream Survey Example
• Shortcut to Creating a Copy on Your Site– Use Any Other Procedure If You Prefer
• Examine Basic Survey Form on Course Site– Click on Link to View Page
• Take a Look at the Page
– View Page Source, Select All, & Copy– Open New File on Server with HTML-Kit
• Named survey.html
– Paste into New File & Save
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Form Verification Rules
• Ice Cream Flavor Rule– An Ice Cream Flavor Radio Box Must Be Checked
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Form Verification Rules
• Toppings Rule– Any Number of Toppings Can Be Checked
• Zero or More
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Form Verification Rules
• Name & Email Address Submission Rules– Neither a Name nor Email Address is Required– If Either a Name or Email Address is Supplied
So Must the Other
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Form Verification Rules
• Name Rules– A Name Must Consist of Only Alphameric
Characters & Certain Others
a-z A-Z dash quote space
– A Name Must Not Consist Solely of Spaces
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Form Verification Rules
• Email Address Rules– A Supplied Email Address Must Be Valid
• For Example
name@mid_domain.top_domain
name@mid_domain1.mid_domain2.top_domain
– Name Must Consist Only ofa-z A-Z 0-9 period dash underscore
– There Must Be One or More mid_domains– mid_domain Must Consist Only of
a-z A-Z 0-9 dash underscore
– top_domain Must Be Two or Three Alphameric Characters
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Form Modifications
• Set Form ACTION, NAME, METHOD• Create External JavaScript Directory & File• Add SCRIPT Container For External File• Add ONSUBMIT Event Handler to the Form• Convert Form Variables to JavaScript
Compatible Names• Create JavaScript Functions in File
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Edit FORM Tag
• Set Form ACTION, NAME, METHOD• Create External JavaScript Directory & File• Add SCRIPT Container For External File• Add ONSUBMIT Event Handler to the Form• Convert Form Variables to JavaScript
Compatible Names• Create JavaScript Functions in File
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Edit FORM Tag
<FORM
ACTION="http://xtrsystems.com/cgi/form_display"
METHOD="POST"
NAME="ice_cream_survey"
>
• ACTION Identifies CGI Program• METHOD Specifies Data Transfer Method• NAME Provides FORM With Identity• Test Survey Now
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Create Directory & File
• Set Form ACTION, NAME, METHOD• Create External JavaScript Directory & File• Add SCRIPT Container For External File• Add ONSUBMIT Event Handler to the Form• Convert Form Variables to JavaScript
Compatible Names• Create JavaScript Functions in File
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Use External JavaScript
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Contents of form_verify.js
// top level function verifying that submitted form data meets rules
function verify(form) {
// if we made it down to this point then everything is OK
return true;
}
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Add External Reference
• Set Form ACTION, NAME, METHOD• Create External JavaScript Directory & File• Add SCRIPT Container For External File• Add ONSUBMIT Event Handler to the Form• Convert Form Variables to JavaScript
Compatible Names• Create JavaScript Functions in File
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Add External Reference
<!DOCTYPE ... >
<HEAD>
<SCRIPT TYPE="/~name/javascript/form_verify.js"></SCRIPT>
</HEAD>
<BODY>
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Add Event Handler
• Set Form ACTION, NAME, METHOD• Create External JavaScript Directory & File• Add SCRIPT Container For External File• Add ONSUBMIT Event Handler to the Form• Convert Form Variables to JavaScript
Compatible Names• Create JavaScript Functions in File
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Add Event Handler
<FORM
ACTION="http://xtrsystems.com/cgi/form_display"
METHOD="POST"
NAME="ice_cream_survey"
ONSUBMIT="return verify(ice_cream_survey)"
>
• ONSUBMIT Causes JavaScript Function to Be Executed When Viewer Hits Submit Button
• Test Survey Now
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Fix Form Variables
• Set Form ACTION, NAME, METHOD• Create External JavaScript Directory & File• Add SCRIPT Container For External File• Add ONSUBMIT Event Handler to the Form• Convert Form Variables to JavaScript
Compatible Names• Create JavaScript Functions in File
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Fix Form Variables
• JavaScript Variable Name Rules– Composed of Any Number of Alphanumerics Plus
The Underscore & Dollar Signa-z A-Z 0-9 _ $
– The First Character Must Not Be a Digit
• Change the FORM Variable Namesice cream flavor -> ice_cream_flavor
email address -> email_address
• Adopt This Convention in Your Future Forms
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Form Modifications
• Set Form ACTION, NAME, METHOD• Create External JavaScript Directory & File• Add SCRIPT Container For External File• Add ONSUBMIT Event Handler to the Form• Convert Form Variables to JavaScript
Compatible Names• Create JavaScript Functions in File
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Verification Logic Flow
• Perform a Series of Tests in Verify Function• If All Tests Are Passed
– Verify Function Will Return True• FORM ACTION Will be Performed
• If any Test Fails– Verify Function Will Return false
• FORM ACTION Will Not be Performed
– Verify Function Also Brings Up alert window– Verify Function Also Positions Insert Point
• On Offending Input Element
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Verification Logic Flow
• Test If an Ice Cream Flavor is Checked– If Checked
• Proceed to Next Test
– If Not Checked• Display Alert• Return False
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Verification Logic Flow
• Test Length of Name & Email Address – If Both Equal Zero
• Return True • Perform ACTION
– If Either or Both are Not Equal to Zero • Proceed to Next Test
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Verification Logic Flow
• Test Name & Email Address Lengths– If Name Length Not Equal to Zero&
Email Length Equal to Zero• Display Alert• Focus on Name• Return False
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Verification Logic Flow
• Test Name & Email Address Lengths– If Name Length Equal to Zero&
Email Length Not Equal to Zero• Display Alert• Focus on Email Address• Return False
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Verification Logic Flow
• Proceed to Next Test– If We Arrive at This Point Then
Name & Email Address Lengths Are Both Non-Zero
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Verification Logic Flow
• Test if Name is Valid– If Only Contains Whitespace
• Display Alert• Focus on Name• Return False
– Otherwise• Proceed to Next Test
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Verification Logic Flow
• Test if Email Address is Valid– If Doesn't Contain Well-Formatted Email Address
• Display Alert• Focus on Email Address• Return False
– Otherwise• All Tests Passed• Return True• Perform ACTION
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
JavaScript Conditionals
• Use if Statements to Enforce Rulesif (this_statement_is_true)) {
execute_the_statements_found_here;
}
// ensure that a radio button has been checked
if (form_object_is_not_checked(form.ice_cream_flavor)) {
window.alert("You've got to select an ice cream flavor.");
return false;
}
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Add Checked Test Code
// top level function verifying that submitted form data meets rules
function verify(form) {
// ensure that a radio button has been checked
if (form_object_is_not_checked(form.ice_cream_flavor)) {
window.alert("You've got to select an ice cream flavor.");
return false;
}
// if we made it down to this point then everything is OK
return true;
}
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Add Function
// if we made it down to this point then everything is OK
return true;
}
// function to test if a radio group element has been checked
function form_object_is_not_checked(object) {
for (var item = 0; item < object.length; item++) {
if (object[item].checked) { return false; }
}
return true;
}
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Add More Test Code
// ensure that a radio button has been checked
if (form_object_is_not_checked(form.ice_cream_flavor)) {
window.alert("You've got to select an ice cream flavor.");
return false;
}
// 1st case: neither a name or email address has been entered - everything is OK
if (form.name.value.length == 0 &&
form.email_address.value.length == 0) {
return true;
}
// if we made it down to this point then everything is OK
return true;
}
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Add More Test Code
// 1st case: neither a name nor email address is entered - everything is OK
if (form.name.value.length == 0 && form.email_address.value.length == 0) {
return true;
}
// 2nd case: only a name has been entered - oops
if (form.name.value.length != 0 &&
form.email_address.value.length == 0) {
window.alert("If you're going to supply a name, you must to supply an email address.");
form.email_address.focus();
return false;
}
// if we made it down to this point then everything is OK
return true;
}
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Add More Test Code
return false;
}
// 3rd case: only an email address has been entered - oops
if (form.name.value.length == 0 && form.email_address.value.length != 0) {
window.alert("If you're going to supply an email address, you must to supply a name.");
form.name.focus();
return false;
}
// if we made it down to this point then everything is OK
return true;
}
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Add More Test Code
// 3rd case: only an email address has been entered - oops
if (form.name.value.length == 0 && form.email_address.value.length != 0) {
window.alert("If you're going to supply an email address, you must to supply a name.");
form.name.focus();
return false;
}
// 4th case: both a name and email address have been entered
// n.b. there's no need to test for this case because the only way we can find ourselves here
// is if the other three cases failed. Right?
// if we made it down to this point then everything is OK
return true;
}
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Add More Test Code
// 4th case: both a name and email address have been entered
// n.b. there's no need to test for this case because the only way we can find ourselves here
// is if the other three cases failed. Right?
// check for a "valid" name
if (!name_is_valid(form.name)) {
window.alert("If you're going to supply a name, it has to be a valid one.");
form.name.focus();
return false;
}
// if we made it down to this point then everything is OK
return true;
}
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Add More Test Code
...
if (object[item].checked) { return false; }
}
return true;
}
// regular expression to test for proper formatting of a first name
// n.b. two tests must be passed for this function to return true
// 1. name must not be made solely of blanks
// 2. name must contain only a-z, A-Z, ', -, and space
function name_is_valid(object) {
if (object.value.match(/^\s+$/)) { return false; }
return !object.value.match(/[^a-zA-Z\- ']/);
}
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Add More Test Code
if (!name_is_valid(form.name)) {
window.alert("If you're going to supply a name, it has to be a valid one.");
form.name.focus();
return false;
}
// check for a "valid" email address
if (!email_address_is_valid(form.email_address)) {
window.alert("If you're going to supply an email address, it has to be a well formatted one.");
form.email_address.focus();
return false;
}
// if we made it down to this point then everything is OK
return true;
}
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Add More Test Code
// regular expression to test for proper formatting of a first name
// n.b. two tests must be passed for this function to return true
// 1. name must not be made solely of blanks
// 2. name must contain no characters other than a-z, A-Z, ', -, and space
function name_is_valid(object) {
if (object.value.match(/^\s+$/)) { return false; }
return !object.value.match(/[^a-zA-Z\- ']/);
}
// regular expression to test for proper formatting of email address
function email_address_is_valid(object) {
return object.value.match(
/^[a-z0-9\-_.]+@(([a-z0-9\-_])+\.)+[a-z]{2,3}$/i);
}
Introduction to JavaScriptForm Verification - Fort Collins, CO
Copyright © XTR Systems, LLC
Congratulations
• You have successfully created a complete JavaScript program
• You have learned– How to integrate JavaScript & HTML– How to access several types of HTML objects– How to write JavaScript functions– How to use HTML event handlers