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

2. 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

3. 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

4. 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

5. 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

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

7. 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

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

9. 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

10. 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

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

12. 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

13. Introduction to JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC Use External JavaScript

14. 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; }

15. 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

16. Introduction to JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC Add External Reference

17. 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

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

19. 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

20. 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 email address -> email_address Adopt This Convention in Your Future Forms

21. 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

22. 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

23. 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

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

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

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

27. 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 & Email Address Lengths Are Both Non-Zero

28. 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

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

30. 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; }

31. 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; }

32. 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; }

33. 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 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; }

34. Introduction to JavaScript Form 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; }

35. Introduction to JavaScript Form 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; }

36. Introduction to JavaScript Form 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; }

37. Introduction to JavaScript Form 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; }

38. 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\- ']/); }

39. 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" 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; }

40. 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 email address function email_address_is_valid(object) { return object.value.match( /^[a-z0-9\-_.]+@(([a-z0-9\-_])+\.)+[a-z]{2,3}$/i); }

41. 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