1. INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 sunny.shi@senecacollege.ca SENECA COLLEGE

2. Outline Client side validation – Using HTML5 features – Using JavaScript Next Class – DOM & Events 2

3. 3 Client-Side Validation - Advantages Saves time and bandwidth. It's fast with immediate user feedback without having to wait for the page to load. You can safely display only one error at a time and focus on the wrong field, to help ensure that the user correctly fills in all the details as required. Still need server-side validation. Client and server-side validation complement each other, and as such, they really shouldn't be used independently.

4. 4 Client-Side Validation - Approaches Display the errors one by one, focusing on the offending field. – Makes revising and successfully submitting the form much easier for the user Display all errors simultaneously, server- side validation style.

5. 5 Client-Side Validation - Guidelines Presence or Absence Test – To determine whether the required fields left empty. Value Test – To determine if a field has a specific value or code. Range Test – To determine if a value entered is within a specific range (inclusive or exclusive)

6. 6 Client-Side Validation - Guidelines Reasonableness Test – To determine if a value entered is reasonable based on other information supplied or information available to us. This test needs to be review periodically. Check Digit Test – To determine if for example, a credit card number or a Driver's license number is valid. Consistency Test MULTIPLE FIELD(s) – To determine if a value entered is consistent with other information entered.

7. Client-Side Validation - Client-Side Validation - Using HTML5  HTML5 provides several new input types & attributes for forms.  New Types: Color, date, email, number, range – Note: these types are not universal. Some browsers do not support some of the new features 7 wk8 -> form_ex_3.html

8. Client-Side Validation - Client-Side Validation - Using HTML5  New Attributes:  required  required attribute – Specifies that an input field is required (must be filled out). – but spaces are acceptable. – For radio buttons, checkboxs and select-option, The required attribute is not supported in any of the major browsers.  pattern  pattern attribute – Specifies a regular expression to check the input value against. 8

9. Input Restrictions with HTML5  title  title attribute – Used to show validation rules  Minmaxmaxlength  Min, max, maxlength attributes – Specifies the minimum/maximum value for an input field 9 wk8-> form_ex_3.html

10. Client-side Validation with JavaScript One thing you’ve already known: – Validation on user’s input Two more things you need to know: – How to execute/call JavaScript code – How to access user’s input on the form

11. Where to put JavaScript Code? 1. In one or many JavaScript code chunks function func1() { /* Javascript code */ } Js.html

12. Where to put JavaScript Code? 2. In one or many JavaScript code chunks function func1() { /* JavaScript code */ } /* just some Javascript code, may be not in function */ Js.html

13. Where to put JavaScript Code? 3. As External file Syntax: In file ex.js: function message() { alert("This javaScript is in external file and was called with the onload event"); } Js.html

14. How Validation Function works onsubmit: <form method='post' name='form1' action = "http://formpost.azurewebsites.net/home/test" onsubmit='return validateName()'> User clicks “submit” button, – trigger the validation function: validateName() – If validateName() returns true, the action will be taken – Otherwise, it returns to user, the form will not be submitted 14

15. 15 Object Hierarchy

16. 16 Example – Text (phone number) Text Box: – Rule: all digits function validateMyForm(frm1) { if (parseInt(frm1.phone.value) != frm1.phone.value) { alert('Please enter a phone number, numbers only'); frm1.phone.focus(); frm1.phone.select(); return false; } return true; } valid_phoneNumber.html valid_phoneNumber_pattern.html

17. 17 Example – Text (name) Text Box: Rules: – at least one alphabetic letter (‘a’-’z’, ‘A’-’Z’) – Check no input var inputValue = document.form1.name.value; valid_text_name.html

18. 18 Example – Datalist Datalist: Rules: – Must select one option from the data list var dl = document.ex.dept.value.trim(); valid_datalist.html

19. 19 Example- TextArea TextArea: Rules: – presence – Not only blanks, – Not only New Line, – Not only Carriage if (document.form1.comments.value.length == 0) valid_textArea.html

20. 20 Example- Radio Radio Button: Rule: – must select one valid_radio.html for (var i = 0; i < max; i++) { //if (document.form1.specialty[i].checked == true) if (document.form1.specialty[i].checked) { counter++; }

21. 21 Example- CheckBox CheckBox: Rules: – At least check one – Check all of the above – Check none of the above – If checked one item, deselect the “check none of the above” – if (document.form1.system_type[i].checked) valid_checkbox.html

22. 22 Example – Select Menu Selection (Select): – Property: selectedIndex sets or returns the index of the selected option in a drop-down list. The index starts at 0. If no option is selected, the selectedIndex property will return -1. If set selectedIndex property as -1, deselect all options. For multiple selections, return the index of the first option selected. selectFieldName.value: the selected option value Rule: – Require to select one item if (document.form1.plans.selectedIndex == -1) valid_select.html

23. 23 Example- button, calculation, enable/disable Button: click a button, do calculation var total = items * Number(document.form1.costper.value) * 1.13; Enable/ Disable a field: document.form1.total.disabled = false; document.form1.total.value = ttotal.toFixed(2); document.form1.total.disabled = true; button_calculation.html

24. 24 Example – “hidden” type This field will not show on the page It provides a means for servers to store state information with a form. change its value by JavaScript, not by user document.form1.jsEnabled.value = “Value 2"; hidden_type.html var hidValue = document.form1.jsEnabled.value; if (hidValue.toLowerCase() == “value1") { document.form1.jsEnabled.value = “value2"; /* Change hidden value */ }

25. Example – Hide / Show a field Name: function showHiddenField() { document.getElementById("hideText").disabled = false; document.getElementById("hideText").style.display = "block"; } function hideField() { var hideObj = document.getElementById("hideText"); hideObj.disabled = true; hideObj.style.display = "none"; } show_hide_field.html

26. 26 Multiple Validation Rules function func1() { code1; } function func2() { code2; } ///////////////////////////// function validateAll() { if (func1() && func2()) { return true; } else { return false; } } // function validateAll() <form name="form1" method = "post“ action = "http://formpost.azurewebsites.net/home/test" onsubmit="return validateAll();">

27. Validation using JavaScript Summary onsubmit: <form method='post' name='form1' action = "http://formpost.azurewebsites.net/home/test" onsubmit='return validateName();'> Refer to the element: document.formname.elementname document.form1.name.value document.form1.specialty[i].checked if (document.form1.plans.selectedIndex == -1) 27

28. Validation using JavaScript Summary Refer to the element (cont’d): getElementById – using getElementById  document.getElementById("elementid") document.getElementById("elementid") this key word – using this key word  Using this key word in form element Using this key word in form element – using getElementsByName  document.getElementsByName("elementname") document.getElementsByName("elementname") returns a collection Validation function return true/false 28

29. Assignment #3 29

30. Next Class Events & DOM 30

31. Thank you!