1. 1 Week 3 – User Input Validation with JavaScript Client-side user input validation Selected features of the JavaScript language Use of JavaScript for form user input validation Regular Expressions Event Handlers

2. COMP/DCOM 461 – CWB2 User Input Validation Browser Server Form JavaScript Validation Code Validation Request Validation Result POST or GET Response Page Active Server-side Code Database Validation Update Java, Perl, etc. Client-side Validation Server-side Validation

3. COMP/DCOM 461 – CWB3 Client-side User Input Validation Avoids round-trip request to server when form has obvious errors Delays (when network or server is slow) Disruption of page transition Unnecessary server traffic Notifying user of error – alternatives: Pop-up “alert box” (annoying, disruptive) Disable submit button plus on-form message (less obvious)

4. COMP/DCOM 461 – CWB4 Server-side User Input Validation Client-side validation does not eliminate the need to validate user input on the server A malicious user could copy and modify your page to eliminate the client-side validation Server-side re-validation is crucial if bad user data could be harmful or insecure Client-side validation is to be considered only a convenience for the user and a means to reduce unnecessary traffic on the server Sometimes validation is too hard to do on the client

5. COMP/DCOM 461 – CWB5 JavaScript Scripting language designed for use in client-side programming in web pages In fact, a powerful, full-featured, object-oriented language Originally created by Netscape, which initially called it LiveScript Standardized by the European Computer Manufacturers Association: http://www.ecma-international.org/publications/standards/Ecma-262.htm

6. COMP/DCOM 461 – CWB6 Primary Differences from Java No strong typing The type of variables are not declared A variable’s type can be changed dynamically Objects work more like a hash table than a structure Creating class instances (objects) uses a “prototype” mechanism An object is created by making a copy of a prototype object associated with the class This means that you can change the class dynamically by changing the prototype object The members of an object are called properties. Properties can be added, deleted, or changed in type Property names can be arbitrary strings Continued … Inheritance: use a prototype for the prototype

7. COMP/DCOM 461 – CWB7 Primary Differences from Java, cont. Functions are objects A constructor function plays the role of the class object – what would be static fields in Java are properties of the constructor function. There are built-in objects referring to the browser window and its various sub-objects

8. COMP/DCOM 461 – CWB8 Objects in a Page Window HTML document A form A text field A checkbox As appearing on the screen window document form textcheckbox As appearing in the JavaScript Document Object Model

9. COMP/DCOM 461 – CWB9 The Browser Invoking JavaScript Code Find Object Corresponding To User Operation Event Handler Defined? Execute JavaScript for the Event Handler Return Value Normal Behavior for the User Action User Performs Some Action Done true Yes Such as clicking, typing, etc. false

10. COMP/DCOM 461 – CWB10 Setting an Event Handler Declares that the code return check(this) will be executed when the form is about to be submitted The code check(this) is a call to a function called check. The argument this refers to the JavaScript object associated with the event (which is the form in this case) The submit will actually occur only if the check function returns true.

11. COMP/DCOM 461 – CWB11 How Do We Define the Function check ? <!-- function check(form) { if(form.t1.value == "") { alert("The text field is empty."); return false; } if(! form.c1.checked) { alert("The checkbox is not checked."); return false; } return true; } //--> Put this code in the It will also work in the, but in the is preferred. The tag “hides” the text inside it from HTML parsing So <, etc. can be used without problem The comment lines are used to prevent problems in older browsers that don’t recognize the tag Alternatively, the JavaScript code can be read in from a file – discussed later. What does this code mean?

12. COMP/DCOM 461 – CWB12 Defining a Function <!-- function check(form) { var txtFld = form.t1; if(txtFld.value == "") { alert("The text field is empty."); return false; } if(! form.c1.checked) { alert("The checkbox is not checked."); return false; } return true; } //--> Defines a function and one parameter Recall: The parameter is a reference to the form object No type is declared for the argument No return value type is declared Declares a local variable called “ txtFld” and initializes it No type is declared for the variable The var is optional, but serves to make the variable local, thus preventing collisions with variables called “ txtFld” that might be used elsewhere form contains properties that references all the elements of the form by ID or name The txtFld var is included here only to illustrate the var concept. It’s unnecessary and doesn’t appear on subsequent slides.

13. COMP/DCOM 461 – CWB13 Defining a Function <!-- function check(form) { if(form.t1.value == "") { alert("The text field is empty."); return false; } if(! form.c1.checked) { alert("The checkbox is not checked."); return false; } return true; } //--> form.t1.value refers to the value of the text field named t1. This tests whether the text field’s value is the empty string. The attributes of a tag will appear as properties of the object associated with the object. Note that string comparison is done with the == operator (unlike Java)

14. COMP/DCOM 461 – CWB14 Defining a Function <!-- function check(form) { if(form.t1.value == "") { alert("The text field is empty."); return false; } if(! form.c1.checked) { alert("The checkbox is not checked."); return false; } return true; } //--> The alert function is built in The alert function pops up a confirmer box with the given text and an OK button. This is an example to illustrate the coding technique. In good design practice, a more detailed, user-friendly message might be given. The check function returns false. This tells the browser to not continue with the submit.

15. COMP/DCOM 461 – CWB15 Defining a Function <!-- function check(form) { if(form.t1.value == "") { alert("The text field is empty."); return false; } if( ! form.c1.checked ) { alert("The checkbox is not checked."); return false; } return true; } //--> This tests if the checkbox is checked or not. The checked attribute is a Boolean. The ! is the NOT operator. It is, of course, pointless to have a single checkbox that you require to be checked (why bother?). This is only an example. Normally, there would be multiple checkboxes and you would verify that at least one of them is checked – or whatever you wish.

16. COMP/DCOM 461 – CWB16 Defining a Function <!-- function check(form) { if(form.t1.value == "") { alert("The text field is empty."); return false; } if( ! form.c1.checked ) { alert("The checkbox is not checked."); return false; } return true; } //--> Again there is a popup alert box and the function returns false to indicate that the submit should not occur. The check function returns true if everything is OK. This causes the submit to actually occur.

17. COMP/DCOM 461 – CWB17 HTML for a Submit Example Submit Example <form id="myForm" method="get" action="javascript:alert('submitted')" onsubmit="return check(this);" > JavaScript from previous slides goes here. Temporary action URL for testing

18. COMP/DCOM 461 – CWB18 The javascript URL Scheme action="javascript:alert('submitted')" The URL uses javascript instead of http for the scheme. This is understood by the browser to mean Don’t send a get request to the server Instead, execute the given text as JavaScript code The resulting value is used as the HTML for a new page To stay on the same page, suppress the value with: void( ) This technique can be very useful for debugging and testing – and sometimes useful for production as well. Notice the use of single quotes inside double quotes

19. COMP/DCOM 461 – CWB19 Sidebar: Bookmarklets Think about the possibilities of having bookmarks or links on your browser that use the javascript: form of URL Hint: remember to use the void syntax to suppress creating a new page void (some JavaScript expression)

20. COMP/DCOM 461 – CWB20 What Have We Done So Far? Added an onsubmit attribute to the tag that calls the check function, passing a reference to the form by using the this keyword. Defined the check function in a tag It tests the values of form fields On error, it pops up an alert box and returns false If all is OK, it returns true Demo: http://cs.franklin.edu/~brownc/461/submitExample.htmlhttp://cs.franklin.edu/~brownc/461/submitExample.html Comment on demo: It would be better to list all errors at once in the alert box!

21. COMP/DCOM 461 – CWB21 Alternative for Including JavaScript Code Demo: http://cs.franklin.edu/~brownc/461/submitExampleWithSRC.html http://cs.franklin.edu/~brownc/461/submitExampleWithSRC.html Benefits Can share JavaScript source among many pages Removes a lot of clutter from the page – improves readability Becomes really important with servlet- and JSP-generated pages! Helps to separate page design and functionality Hides your JavaScript code from the casual observer But, of course, one can always access the.js file separately. There are techniques for encrypting the JavaScript file, but we won’t go into them. Still need the end tag

22. COMP/DCOM 461 – CWB22 Getting the values of form fields Type of AttributeAttribute Values checkbox or radio checked true or false value the value to be submitted if true file value the URL of the file to be uploaded hidden value the value to be submitted text or password value the text to be submitted button, submit, reset N/A selectedIndex 0-based number of the that is selected options[index].value the value to be submitted value the text to be submitted

23. COMP/DCOM 461 – CWB23 Special Code for Accessing Radio Buttons Recall, the radio buttons that work as a group are given the same name Thus, JavaScript uses an array to represent them: var radioGroup = form.userRating; var rb; var valueChecked = ""; for(rb = 0; rb < radioGroup.length; rb++) if(radioGroup[rb].checked) valueChecked = radioGroup[rb].value; alert("The value checked is: " + valueChecked); if(valueChecked == "bad") #unfair validation! return false; return true; } Arrays have a built-in length property. An array of all the elements with the name userRating Demo: http://cs.franklin.edu/~brownc/461/submitExampleWithRadio.htmlhttp://cs.franklin.edu/~brownc/461/submitExampleWithRadio.html Java-style for statement

24. COMP/DCOM 461 – CWB24 Exercise Given a page with 3 radio buttons, add a validation function to ensure that one is selected. (We’ll work together as a class.) Starting point: http://cs.franklin.edu/~brownc/461/InClassValidationRadio.html http://cs.franklin.edu/~brownc/461/InClassValidationRadio.html

25. COMP/DCOM 461 – CWB25 Validation Upon Field Change Check validation as soon as user changes a field Benefit: more convenient for user to know of error right away Problems: Can’t check for required fields Won’t prevent submit, so you have to re-validate with onsubmit Can give a spurious error when one of two dependent fields are changed Can be annoying if done clumsily

26. COMP/DCOM 461 – CWB26 Validation Upon Field Change, cont. onchange event occurs field is losing focus but only if its value has changed <input type=“checkbox” name=“opt1” onchange=“validate(this)” > <textarea cols=“30” rows=“10” name=“comment” onchange=“validate(this)” >

27. COMP/DCOM 461 – CWB27 The onchange Event Event occurs on a form field. The this variable refers to the field, not the form You have the choice of Defining a separate validation function for each field or Using a common validation function that applies different rules for different fields: if(field.name == “password”) … Event fires when the form element loses focus but only if its value has changed Gives you the ability to tell users of errors immediately

28. COMP/DCOM 461 – CWB28 Example: Verify a 5 Digit Zip Code function validate5Zip(field) { //verify it’s a 5-digit zip code var zip = field.value; if(zip.length != 5 || isNaN(parseInt(zip)) { alert(“please enter a 5 digit zip code.”); return false; } return true; } Converts string to integer and checks if result is “not a number” Note: Use the keyboard double quote character. These open and close quotes are an artifact of PowerPoint

29. COMP/DCOM 461 – CWB29 Example Recast as a Single Validation Function The validate function: function validate(field) { var val = field.value; switch(field.name) { case "zipcode": if(val.length != 5 || isNaN(parseInt(val)) { alert(“please enter a 5 digit zip code.”); return false; } break; case … //Other fields tested here } return true; } <input type=“text” name=“zipcode” onchange=“validate(this)” > Note the switch statement works with strings!

30. 30 A Few More JavaScript Details Emphasizing Differences from Java

31. COMP/DCOM 461 – CWB31 Accessing Object Properties Properties are somewhat like class members in Java Reference properties in 2 ways: 1. var txtfld = obj.userName; 2. var txtfld = obj["userName"]; Properties can be added dynamically: obj.myOwnProperty = 92; Only valid when property name is alphanumeric, starting with letter. Any format of property name; Think: array with non-numerical indices Creates myOwnProperty if it’s not already present

32. COMP/DCOM 461 – CWB32 Strings Strings can be concatenated with the + operator: var s = "My name is " + theName; Most values can be converted automatically to strings: var n = 7; var s = "The number is " + n; Strings have a property called length Not a length() method as in Java

33. COMP/DCOM 461 – CWB33 String Functions Strings have many built-in functions. Here are a few examples: charAt(n) – get the n th character (0 based) var i = name.charAt(3); //get 4th character in name indexOf(substring, n) – search for the substring in the string and return its index (0-based character number) n is optional and indicates where to start looking returns -1 if the substring is not found substring(s, t) – extract characters from the string, starting at index s up to but not including index t match, search, replace – discussed later Returns a string, not a character

34. COMP/DCOM 461 – CWB34 Arrays Arrays are objects that have properties whose names are integer numbers Must use the [ ] notation, not the. notation Special length property gives the number of elements (mostly) var s = ""; var radios = form.choices; for(var r = 0; r < radios.length; r++) s = s + " " + radios[r].value; var firstRadio = radios[0]; The name of the radio group

35. COMP/DCOM 461 – CWB35 Quotes in JavaScript and HTML Single quotes and double quotes are equivalent. Inside a double-quoted string, use single quotes to enter a nested quote: onchange="alert('It changed!')" var message = "It's OK.". Inside a single-quoted string, use double quotes to enter a nested quote: var message = 'Please see "Instructions"'; Quotes can also be escaped with \ var message = "Please see \"Instructions\""; Not recognized by HTML attributes

36. COMP/DCOM 461 – CWB36 If Statements In Java, the expression inside the if(…) must be of type boolean In JavaScript, any type of expression is converted to a Boolean value if possible Number: converted to true when non-zero String: converted to true when non-empty (so “0” is true; “false” is true; “” is false) Object: always converts to true Array: inconsistent across browsers Function: true null: false undefined: false

37. COMP/DCOM 461 – CWB37 Looping Statements while statement: like Java for statement: like Java, except … for(x in a) Automatically iterates through an array or through the properties of an object In each iteration, x is set to the array index or the name of the property for(x in form.elements) alert("Element " + x + "'s value is " + form.elements[x].value ); elements is a property of the form element that is a collection of all the form’s elements

38. COMP/DCOM 461 – CWB38 Functions Named functions function myFunction(a, b) { … } Accessed as var value = myFunction(4, "Hello”); Anonymous functions myObject.aFunction = function(a, b) {…} Accessed as var otherValue = myObject.aFunction(9, 0); Creates a function that is a method of the object

39. 39 Regular Expression Matching Fancier Validation

40. COMP/DCOM 461 – CWB40 Regular Expression Patterns in JavaScript /hello/  matches “hello” /[jbs]unk/  matches “junk”, “bunk”, or “sunk” /\d/ -- matches a digit /ab*c/  matches an “a” and a “c” with zero or more “b”s between them /ab+c/  matches an “a” and a “c” with one or more “b”s between them /a.c/  matches an “a” and a “c” with exactly 1 arbitrary character between them /(asdfg){3}/  matches 3 repetitions of the string “asdfg” /bite?/  matches bit or bite /^bat /  matches “bat” at the beginning of the string /ment$/  matches “ment” at the end of the string /large|medium|small/  matches any of the 3 words

41. COMP/DCOM 461 – CWB41 Selected Summary of the Pattern Syntax An item is a single character or a group enclosed in parentheses ?  the previous item (character or group) is optional *  the previous items is optional and may appear any number of times +  the previous items is not optional but may appear any number of times {n}  the previous item is required to appear n times ^  matches the beginning of the string $  matches the end of the string \d  matches any digit \w  matches a “word” \s  matches any whitespace character […]  matches any of the characters between the [] |  alternation; a|b matches a or b See pages 342, 343 in Anderson-Freed.

42. COMP/DCOM 461 – CWB42 A Zip Code Pattern To match 5 or 9 digit zip codes: /^\d{5}(-\d{4})?$/ Matches exactly 5 digits Matches a dash followed by 4 digits Makes the dash and 4 digits optional Match must start at the beginning of the string Match must end at the end of the string

43. COMP/DCOM 461 – CWB43 Regular Expression Demo http://cs.franklin.edu/~brownc/461/regexpdemo.html

44. COMP/DCOM 461 – CWB44 Using Patterns in JavaScript Code The String method search(pattern) returns the numerical index of the substring matching the pattern returns -1 if there is no match. if(zip.search( /^\d{5}(-\d{4})?$/ ) == -1) { alert(“Please enter a 5 or 9 digit zip code”); }

45. COMP/DCOM 461 – CWB45 Using Patterns in JavaScript Code, alt. The String method match(pattern) returns an object describing the match returns null if there is no match if( !zip.match( /^\d{5}(-\d{4})?$/ ) ) { alert(“Please enter a 5 or 9 digit zip code”); } null evaluates to false

46. COMP/DCOM 461 – CWB46 5 or 9 Digit Zip Code Field Validation Function function validateZip(field) { var zip = field.value; if( zip.search( /^\d{5}(-\d{4})?$/ ) == -1 ) { alert("Please enter a 5 or 9 digit zip code."); return false; } return true; }

47. COMP/DCOM 461 – CWB47 Some regular expression references http://www.jansfreeware.com/articles/regexpress.html http://www.visibone.com/regular-expressions/

48. 48 Additional Topics

49. COMP/DCOM 461 – CWB49 onsubmit Validation Combined with onchange Validation function check(form) { if(!validateZip(form.zip59) ) return false; if(!form.c1.checked) { alert("The checkbox is …"); return false; } return true; } Re-validate fields with onchange validation in case they remain unchanged from a default value: Invoke the onchange validation function used in the onsubmit handler Avoid duplicated code. Sidebar Be careful of alerts and other messages when you invoke a validation function from inside another. Avoid duplicate warnings and other annoying behavior. Check for required fields

50. COMP/DCOM 461 – CWB50 When one field’s validation depends on the value of another field: In onsubmit validation, there’s no new problem since the form object is passed as a parameter In onchange validation, you access the form object through the field’s form property: function validateShipAddress(field) { var isSameAddress = field.form.sameAddressCheck.checked; if(!isSameAddress) //if user hasn’t said ship address is same if(!field.value) { alert("Please enter a shipping address or check the box" + "\"Shipping Address Is Same As Billing Address\""); return false; } return true; } Cross-Field Validation

51. COMP/DCOM 461 – CWB51 Next Week’s Assignment http://cs.franklin.edu/Syllabus/comp461/assignments.html#validation In Registration Page User ID must be at least 4 characters. How do we do this? Validation of state, postal code, and telephone fields depend on the country. Note: the telephone field is never required In Checkout Page Normally validation of all fields would occur. I do not require you to repeat the work done on the Registration Page.

52. COMP/DCOM 461 – CWB52 Next Topic Server-side page generation using Perl Next week we introduce the Perl language In two weeks, we cover selected details of handling forms and other actions