Introduction to JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC Verifying Submitted Form Data with JavaScript Instructor: Joseph DiVerdi, Ph.D., MBA

Introduction to JavaScript Form 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 JavaScript Form 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 JavaScript Form 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 JavaScript Form 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 JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC Form Verification Rules Name & Address Submission Rules –Neither a Name nor Address is Required –If Either a Name or Address is Supplied So Must the Other

Introduction to JavaScript Form 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 JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC Form Verification Rules Address Rules –A Supplied Address Must Be Valid For Example –Name Must Consist Only of a-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 JavaScript Form 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 JavaScript Form 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 JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC Edit FORM Tag <FORM ACTION=" 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 JavaScript Form 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 JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC Use External JavaScript

Introduction to JavaScript Form 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 JavaScript Form 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 JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC Add External Reference

Introduction to JavaScript Form 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 JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC Add Event Handler <FORM ACTION=" 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 JavaScript Form 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 JavaScript Form 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 Sign a-z A-Z 0-9 _ $ –The First Character Must Not Be a Digit Change the FORM Variable Names ice cream flavor -> ice_cream_flavor address -> _address Adopt This Convention in Your Future Forms

Introduction to JavaScript Form 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 JavaScript Form 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 JavaScript Form 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 JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC Verification Logic Flow Test Length of Name & Address –If Both Equal Zero Return True Perform ACTION –If Either or Both are Not Equal to Zero Proceed to Next Test

Introduction to JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC Verification Logic Flow Test Name & Address Lengths –If Name Length Not Equal to Zero& Length Equal to Zero Display Alert Focus on Name Return False

Introduction to JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC Verification Logic Flow Test Name & Address Lengths –If Name Length Equal to Zero& Length Not Equal to Zero Display Alert Focus on Address Return False

Introduction to JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC Verification Logic Flow Proceed to Next Test –If We Arrive at This Point Then Name & Address Lengths Are Both Non-Zero

Introduction to JavaScript Form 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 JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC Verification Logic Flow Test if Address is Valid –If Doesn't Contain Well-Formatted Address Display Alert Focus on Address Return False –Otherwise All Tests Passed Return True Perform ACTION

Introduction to JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC JavaScript Conditionals Use if Statements to Enforce Rules if (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 JavaScript Form 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 JavaScript Form 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 JavaScript Form 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 address has been entered - everything is OK if (form.name.value.length == 0 && form. _address.value.length == 0) { return true; } // if we made it down to this point then everything is OK return true; }

Introduction to JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC Add More Test Code // 1st case: neither a name nor address is entered - everything is OK if (form.name.value.length == 0 && form. _address.value.length == 0) { return true; } // 2nd case: only a name has been entered - oops if (form.name.value.length != 0 && form. _address.value.length == 0) { window.alert("If you're going to supply a name, you must to supply an address."); form. _address.focus(); return false; } // if we made it down to this point then everything is OK return true; }

Introduction to JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC Add More Test Code return false; } // 3rd case: only an address has been entered - oops if (form.name.value.length == 0 && form. _address.value.length != 0) { window.alert("If you're going to supply an 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 JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC Add More Test Code // 3rd case: only an address has been entered - oops if (form.name.value.length == 0 && form. _address.value.length != 0) { window.alert("If you're going to supply an address, you must to supply a name."); form.name.focus(); return false; } // 4th case: both a name and 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 JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC Add More Test Code // 4th case: both a name and 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 JavaScript Form 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 JavaScript Form 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" address if (! _address_is_valid(form. _address)) { window.alert("If you're going to supply an address, it has to be a well formatted one."); form. _address.focus(); return false; } // if we made it down to this point then everything is OK return true; }

Introduction to JavaScript Form 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 address function _address_is_valid(object) { return object.value.match( }

Introduction to JavaScript Form 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