Info + Web Tech Course

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

2. Lecture 8 - Overview Forms in HTML JavaScript • Form Validation Exercise 4 • Demos Lectures – Week 8 Contenthttp://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures.html#week8

3. JavaScript – Some Uses • Display information based on Time of DayJavaScript can check the computer's clock and pull the appropriate data based on the clock information. • Detect Visitor's Browser last lectureJavaScript 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 CookiesJavaScript can store information on the visitor's computer and retrieve it automatically next time the user visits your page. • Change Page Contents DynamicallyJavaScript 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. HTML Forms • 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. HTML Form – Form Tag • <form> form elements </form> • Inside <form> tag • methodattribute 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 <form method="post" action="formdata.php"> • label and form element • <form method="post" action="mailto:youremailaddress"> • <label>First Name: </label> • <input type="text" name="firstname" /> • </form>

6. HTML Form – Form Elements and Organization • Form Elements Text Field <input type="text" name="firstname" /> Text Area <textarea rows="10" cols="30" name="texta">text</textarea> Password <input type="password" name= "password" /> Radio Button <input type="radio"name= "y_n" value="yes" />Yes<br /> Checkbox<input type="checkbox"name="vehicle" value="Bike" /> Menu<selectname="cars"><option value="kia">Kia</option></select> Submit Button <input type="submit" value="Submit" /> Reset Button <input type=“reset" value="Submit" /> nameneeded to referenceinput element • Organize Form Elements <fieldset id="idname"><legend align=“left”>Legend Text</legend>Form Elements</fieldset>

7. HTML5 Form – New Elements & Attributes • HTML5 New Form Elements Email Input <input type="email" name="email" /> Telephone Input <input type="tel" name="phone" /> URL Input<input type="url" name="website" /> Search Input <input type="search" name="search" /> • Attributes required user needs to complete field for form to be able to submitnot supported in Internet Explorer 9- or in Safari novalidateturns 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. Form Example http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec8/Steps/formDemo.html • <form method="post" action="mailto:youremailaddress"> • <fieldset id="personal"> • <legend align="left">Personal Data</legend> • <label>First Name: </label><input type="text" name="firstname" /> • <br /> • <label>Last Name: </label><input type="text" name="lastname" /> • </fieldset> • <p> • <input type="submit" value="Submit" name="submit"/> • <input type="reset" value="Reset" name="reset"/> • </p> • </form> Online Practice http://www.w3schools.com/html/html_forms.asp

9. Examine Form & CSS in Detail • Form Example Featured in Ch17 of Castro Book version6 (link Week 8 Readings) • http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec8/Steps/fullform_castro.html • Examine HTML Structure <form> | <fieldset> | <input> | <select> Use of ids and classes • 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. 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. 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 <script> tag inside of <head> Why? • How to create function for Lastname?

12. 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. 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. 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. Function to Count the Number of Checkboxes Selected • function checkboxesSelected (checkboxes, errorString) { • varcheckboxesSelected = 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 varcheckboxesSelected = 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. Function to Test if Number is Within Certain Range • function validateAge(fieldvalue) { • if (isNaN(fieldvalue)) return "No Age was entered.\n" • else if (fieldvalue < 18 || fieldvalue > 110) • return "Age must be between 18 and 110.\n" • return "" • }

17. 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. Demo – Create JavaScript Functions to Validate • Create fieldEmpty function • 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 • Create validEmail function • Update validate function • Create radioButtonSelected function • Update validate function • Create checkboxesSelected function • Update validate Function • Examine other validation functions • http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec8/Steps/fullform_castro_validate.html