1. © Anselm SpoerriInfo + Web Tech Course Information Technologies Info + Web Tech Course Anselm Spoerri PhD (MIT) SC&I @ Rutgers University aspoerri@rutgers.edu anselm.spoerri@gmail.com

2. © Anselm SpoerriInfo + Web Tech Course Lecture 8 - Overview Forms in HTML JavaScript –Form Validation Exercise 4 –Demos Lectures – Week 8 Content http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures.html#week8 http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures.html#week8

3. © Anselm SpoerriInfo + Web Tech Course JavaScript – Some Uses Display information based on Time of Day JavaScript can check the computer's clock and pull the appropriate data based on the clock information. Detect Visitor's Browser last lecture JavaScript can be used to detect the visitor's browser, and load another page specifically designed for that browser. Validate Forms Data this lecture JavaScript can be used to validate form data at the client-side saving both the precious server resources and time. Add Interactivity to Website last lecture JavaScript can be set to execute when something happens, like when a user moves mouse over an image. Create Cookies JavaScript can store information on the visitor's computer and retrieve it automatically next time the user visits your page. Change Page Contents Dynamically JavaScript can change the display of content without the involvement of server programs. It can read and change the content of an HTML elements or move them around pages.

4. © Anselm SpoerriInfo + Web Tech Course HTML Forms ‒ Solicit feedback or information from visitors ‒ Collection of data entry fields, labels, buttons ‒ Processing script on server (PHP) ‒ Never assume anything about data http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec8/Steps/formDemo.html

5. © Anselm SpoerriInfo + Web Tech Course HTML Form – Form Tag 1. form elements 2.Inside tag –method attribute specifies way in which data is to be sent –method="get" (limited data amount) method="post" –action attribute specifies URL to which user data is to be sent 3.label and form element First Name:

6. © Anselm SpoerriInfo + Web Tech Course HTML Form – Form Elements and Organization Form Elements Text Field Text Area text Password Radio Button Yes Checkbox Menu Kia Submit Button Reset Button name needed to reference input element Organize Form Elements Legend Text Form Elements

7. © Anselm SpoerriInfo + Web Tech Course HTML5 Form – New Elements & Attributes HTML5 New Form Elements Email Input Telephone Input URL Input Search Input Attributes required user needs to complete field for form to be able to submit not supported in Internet Explorer 9- or in Safari novalidate turns off HTML5 automatic validation via form element pattern defines text pattern needed for form to be able to submit placeholder provides hint of pattern needed for form to submit label element for same value as form field’s id  explicitly associated

8. © Anselm SpoerriInfo + Web Tech Course Form Example Personal Data First Name: Last Name: http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec8/Steps/formDemo.html Online Practice http://www.w3schools.com/html/html_forms.asp http://www.w3schools.com/html/html_forms.asp

9. © Anselm SpoerriInfo + Web Tech Course Examine Form & CSS in Detail Form Example Featured in Ch17 of Castro Book version6 (link Week 8 Readings)Week 8 Readings http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec8/Steps/fullform_castro.html 1.Examine HTML Structure | | | Use of ids and classes 2.Examine External CSS file CSS rules created for ids, classes and tags Use of em –unit of measurement with respect to point size of current font. –1 em of a 16 point typeface is 16 points You will email form data to your email address. In future lecture, you will learn how to send data to PHP file.

10. © Anselm SpoerriInfo + Web Tech Course JavaScript – Validate Forms Data Validate Forms Data ‒ Client-side JavaScript used to validate form ‒ Saves server resources and time ‒ Can Not Trust any data submitted to server Hackers can quite easily simulate your web forms and submit any data of their choosing. JavaScript Code for Form Validation http://www.w3schools.com/js/js_form_validation.asp See Lectures: Week 8 for more resources.

11. © Anselm SpoerriInfo + Web Tech Course JavaScript – Validate Forms Data: Create Functions // If field is empty, return text. If field is not empty, return empty string // function validateFirstname (fieldvalue) { if (fieldvalue == "") return "No First Name was entered.\n" return "" } Where do we store JavaScript code? –Inside of tag inside of Why? How to create function for Lastname?

12. © Anselm SpoerriInfo + Web Tech Course JavaScript – Validate Forms Data: Create Functions /*Need to validate contents of fields to make user have entered the right data. Make use of Document Object Model and use JavaScript to access it */ function validate(form) { fail = validateFirstname (form.firstname.value) fail += validateLastname (form.lastname.value) if (fail == "") return true else { alert(fail); return false } } On Submit needs to trigger validate function <form method="post" action="mailto:youremailaddress" onsubmit="return validate(this)" > where this = current form http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec8/Steps/formDemo_validate.html

13. © Anselm SpoerriInfo + Web Tech Course Function to Test if Field is Empty /* If field value is empty, return text. If field is not empty, return empty string // use errorString as function parameterso that we can use same function for any field */ function fieldEmpty(fieldvalue, errorString) { if (fieldvalue == "") { return (errorString); } else { return ""; // return empty string } }

14. © Anselm SpoerriInfo + Web Tech Course Function to Test if Radio Button is Selected function radioButtonSelected (radioButtons, errorString) { radioSelected = -1; for (i=radioButtons.length-1; i > -1; i--) { if (radioButtons[i].checked) { radioSelected = i; i = -1; // set index to -1 so that for loop stops } } if (radioSelected == -1) { return (errorString); } else { return ""; } }

15. © Anselm SpoerriInfo + Web Tech Course Function to Count the Number of Checkboxes Selected function checkboxesSelected (checkboxes, errorString) { var checkboxesSelected = 0; for (i=0; i<checkboxes.length; i++) { // test if current checkbox is checked... if yes, add 1 to counter if (checkboxes[i].checked) { checkboxesSelected += 1; } } if (checkboxesSelected == 0) { return (errorString); } else { return ""; } } Have to Use var checkboxesSelected = 0; because: 1) function is also called "checkboxesSelected" and without explicit var declaration, a name conflict is created. 2) Good practice to have var when declaring a variable...not doing it in our JavaScript examples to not add more complexity.

16. © Anselm SpoerriInfo + Web Tech Course Function to Test if Number is Within Certain Range function validateAge(fieldvalue) { if (isNaN(fieldvalue)) return "No Age was entered.\n" else if (fieldvalue 110) return "Age must be between 18 and 110.\n" return "" }

17. © Anselm SpoerriInfo + Web Tech Course Function to Test Email Address function validateEmail (fieldvalue) { if (fieldvalue == "") return "No Email was entered.\n" else if ( !( (fieldvalue.indexOf(".") > 0) && // Boolean AND (fieldvalue.indexOf("@") > 0) ) || // Boolean OR /[^a-zA-Z0-9.@_-]/.test(fieldvalue) ) return "The Email address is invalid.\n" return "" }

18. © Anselm SpoerriInfo + Web Tech Course Demo – Create JavaScript Functions to Validate 1.Create fieldEmpty function 2.Create validate function and –Make sure that “Submit” input triggers validate function –Make sure field name used in function parameter matches field name in HTML code 3.Create validEmail function 4.Update validate function 5.Create radioButtonSelected function 6.Update validate function 7.Create checkboxesSelected function 8.Update validate Function 9.Examine other validation functions http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec8/Steps/fullform_castro_validate.html