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

Introduction to JavaScriptForm Verification - Fort Collins, CO

Copyright © XTR Systems, LLC

Verifying SubmittedForm Data

with JavaScript

Instructor: Joseph DiVerdi, Ph.D., MBA



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



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



Form Verification Rules

• Ice Cream Flavor Rule– An Ice Cream Flavor Radio Box Must Be Checked




• Toppings Rule– Any Number of Toppings Can Be Checked

• Zero or More




• 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




• 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




• 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



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



Edit FORM Tag





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



Create Directory & File





Use External JavaScript



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;

}



Add External Reference





Add External Reference

<!DOCTYPE ... >

<HEAD>

<SCRIPT TYPE="/~name/javascript/form_verify.js"></SCRIPT>

</HEAD>

<BODY>



Add Event Handler





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



Fix Form Variables





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



Form Modifications





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




• Test If an Ice Cream Flavor is Checked– If Checked

• Proceed to Next Test

– If Not Checked• Display Alert• Return False




• 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




• Test Name & Email Address Lengths– If Name Length Not Equal to Zero&

Email Length Equal to Zero• Display Alert• Focus on Name• Return False




• 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




• Proceed to Next Test– If We Arrive at This Point Then

Name & Email Address Lengths Are Both Non-Zero




• Test if Name is Valid– If Only Contains Whitespace

• Display Alert• Focus on Name• Return False

– Otherwise• Proceed to Next Test




• 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



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;

}



Add Checked Test Code

// top level function verifying that submitted form data meets rules

function verify(form) {




return false;

}


return true;

}



Add Function


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;

}



Add More Test Code




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;

}


return true;

}



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;

}


return true;

}



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;

}


return true;

}



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?


return true;

}



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;

}


return true;

}



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

}



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;

}


return true;

}



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);

}



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

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

Documents

Transcript of Introduction to JavaScript Form Verification - Fort Collins, CO Copyright © XTR Systems, LLC...