GCU JavaScript code Questions

CENTENNIAL COLLEGE PROGRESS CAMPUSCOURSE COMP125
MIDTERM TEST – Part B
Implement the JavaScript code for the form below:
Project Setup:
1. Download the zip file attached to the Midterm Test (Hands-on) drop box folder on eCentennial.
2. Unzip it and open the project with your code editor (suggested: Visual Studio Code).
Requirements:
1. Add to the JavaScript file a function to copy data from one field to another based on the
checkbox “Same as Billing Address”, that indicates the respective fields should have the
same value in the Shipping Address as in the Billing Address. (5 marks)
2. Create custom validations feedback using the Constraint Validation API for each field
that is required:
a. Use setCustomValidity() when the value of the field is missing. (5 marks)
b. In the CSS, use :invalid and :valid pseudo-classes for each input and select
elements. (2.5 marks)
3. Remove default values from select elements by using JavaScript to set the selected Index
property to -1 (selectedIndex = -1). (5 marks)
4. Add a placeholder to each field to increase the content accuracy. (2.5 marks)
HINT:
–
To change properties of form elements based on validity status, refer to the power point
of chapter 06 slides 35 – 42.
Ensure you link your CSS and JavaScript file to your html.
Submission:
–
Ensure all your files are in the same folder.
Upload the zip folder into Midterm Test (Hands-on) drop box on e-Centennial.
PUBLISH IT to studentweb server or InfinityFree.com and paste the link it in the
comments of the submission. (Penalty 20%)
o Example: http://studentweb.cencol.ca/username/comp125/midterm/index.html
CENTENNIAL COLLEGE PROGRESS CAMPUS
COURSE COMP125
MIDTERM TEST – Part B
Implement the JavaScript code for the form below:
Project Setup:
1. Download the zip file attached to the Midterm Test (Hands-on) drop box folder on eCentennial.
2. Unzip it and open the project with your code editor (suggested: Visual Studio Code).
Requirements:
1. Add to the JavaScript file a function to copy data from one field to another based on the
checkbox “Same as Billing Address”, that indicates the respective fields should have the
same value in the Shipping Address as in the Billing Address. (5 marks)
2. Create custom validations feedback using the Constraint Validation API for each field
that is required:
a. Use setCustomValidity() when the value of the field is missing. (5 marks)
b. In the CSS, use :invalid and :valid pseudo-classes for each input and select
elements. (2.5 marks)
3. Remove default values from select elements by using JavaScript to set the selected Index
property to -1 (selectedIndex = -1). (5 marks)
4. Add a placeholder to each field to increase the content accuracy. (2.5 marks)
HINT:
–
To change properties of form elements based on validity status, refer to the power point
of chapter 06 slides 35 – 42.
Ensure you link your CSS and JavaScript file to your html.
Submission:
–
Ensure all your files are in the same folder.
Upload the zip folder into Midterm Test (Hands-on) drop box on e-Centennial.
PUBLISH IT to studentweb server or InfinityFree.com and paste the link it in the
comments of the submission. (Penalty 20%)
o Example: http://studentweb.cencol.ca/username/comp125/midterm/index.html
JavaScript for Web Warriors,
7e
Chapter 6: Enhancing and
Validating Forms
Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be
scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Chapter Objectives (1 of 2)
By the end of this chapter, you should be able to:
• Use JavaScript to reference forms and form elements.
• Retrieve values from selection lists.
• Retrieve values from option buttons.
• Format numeric values and currency values based on local standards.
• Write scripts that respond to form events.
• Store values in hidden fields.
Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be
scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Chapter Objectives (2 of 2)
By the end of this chapter, you should be able to:
• Understand how web forms are submitted for validation.
• Validate web form fields using customized tools.
• Test a field value against a regular expression.
• Create a customized validation check for credit card data.
• Manage the form validation process.
Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be
scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Exploring Forms and Form Elements (1 of 5)
Figure 6-1 Product order
form
Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be
scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Exploring Forms and Form Elements (2 of 5)
• The forms collection
• JavaScript organizes forms into the HTML collection: document.forms
• Syntax for referencing, where n is the index or fname is the value of the form’s name
attribute:
document.forms[n]
document.forms[fname]
document.forms.fname
• Working with form elements
• Organized into the HTML collection: form.elements
• Syntax for referencing fields, where ename is the value of the name attribute:
form.elements[ename]
form.elements.ename
• Reference the associated control using the document.getElementById() method
Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be
scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Exploring Forms and Form Elements (3 of 5)
Figure 6-3 Web form hierarchy
Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be
scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Exploring Forms and Form Elements (4 of 5)
• Properties and methods of input elements
• Every attribute associated with the HTML tag is mirrored by a JavaScript
property
• Sample statement to set the value of the username field within the orderForm web
form:
document.orderForm.username.value = “John Smith”;
• Navigating between input controls
• A form control receives the browser’s focus when it becomes active
• The element.focus() method gives focus to a form element
• The element.blur() method removes focus from an element without reassigning it
Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be
scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Exploring Forms and Form Elements (5 of 5)
Figure 6-5 Giving the
focus to the Model
selection list
Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be
scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Working with Selection Lists (1 of 4)
Property or Method
Description
select.length
The number of options in the selection list, select
select.multiple
Returns true if more than one option can be selected from the list
select.name
The selection list field name
select.options
The object collection of the selection list options
select.selectedIndex
The index number of the currently selected option
select.size
The number of options displayed in the selection list
select.add(option)
Adds option to the selection list
select.remove(index)
Removes the option with the index number, index, from the selection list
Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be
scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Working with Selection Lists (2 of 4)
Property or Method
Description
option.defaultSelected
Returns true if option is selected by default
option.index
The index number of option within the options collection
option.selected
Returns true if the option has been selected by the user
option.text
The text associated with option
option.value
The field value of option
Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be
scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Working with Selection Lists (3 of 4)
• To return the value from a selection list field:
• Determine which option was selected using the selectedIndex property
• Returns -1 if no option is selected
• Reference the value property of the selected option
• Sample code for returning the cost of the product chosen from the model selection list:
let mIndex = model.selectedIndex;
let mValue = model.options[mIndex].value;
• Selection list with multiple values
• Create a for loop that runs through the options in the list, checking to determine whether
the selected property is true
Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be
scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Working with Selection Lists (4 of 4)
Figure 6-8 Calculating
the cost of models
ordered
Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be
scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Working with Option Buttons (1 of 6)
• Option (radio) buttons are grouped into a form.elements.options HTML collection
when they share the same name attribute
• Sample reference to the first option button for the plan field:
document.forms.orderForm.elements.plan[0]
Property
Description
option.checked
Boolean value indicating whether the option button, option, is currently
checked by the user
option.defaultChecked
Boolean value indicating whether option is checked by default
option.disabled
Boolean value indicating whether option is disabled or not
option.name
The field name associated with option
option.value
The field value association with option
Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be
scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Working with Option Buttons (2 of 6)
• Locating the checked option
• Sample for loop that stores the value of the selected option in the planValue variable:
let orderForm = document.forms.orderForm;
let plan = orderForm.elements.plan;
for (let i = 0; i < plan.length; i++) { if (plan[i].checked) { planValue = plan[i].value; break; } } • Sample code using the querySelector() method to retrieve the checked option's value: let planValue = document.querySelector('input[name="plan"]:checked').value; Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Working with Option Buttons (3 of 6) Figure 6-11 Calculating the cost of the protection plan Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Working with Option Buttons (4 of 6) Figure 6-12 Calculating the subtotal, sales tax, and total order cost Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Working with Option Buttons (5 of 6) Figure 6-13 Initial order calculations Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Working with Option Buttons (6 of 6) • Accessing the option label • Text associated with the button is part of the tag, not part of the tag • Label is associated with the input control through its for attribute, which matches the input control's id attribute • JavaScript's labels node list for any input element: input.labels • Sample code to retrieve the label text for the No Protection Plan option button: let noProtection = document.getElementById("plan_0"); let planLabel = noProtection.labels[0].textContent; • Sample code to retrieve the label text for the selected option button: let plan = document.querySelector('input[name="plan"]:checked'); let planLabel = plan.labels[0].textContent; • HTML code in a label is retrieved using the innerHTML property Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Activity 6.1: Knowledge Check 1. Compare the process of retrieving the value of an input box in a web form to that of retrieving the chosen value from a selection list. 2. How can you retrieve the value and the label for the option selected by the user from a group of radio buttons? Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Activity 6.1: Knowledge Check Answers (1 of 2) 1. Compare the process of retrieving the value of an input box in a web form to that of retrieving the chosen value from a selection list. To retrieve the value of an input box, you can simply reference its value property. To retrieve the chosen value for a selection list, on the other hand, you must first identify the selection option used the field's selectedIndex property, and then reference the value property for the selected option. If the selection list allows multiple selections, then you must iterate through the options to store all the selected options in an array, then iterate over the array to extract the values. Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Activity 6.1: Knowledge Check Answers (2 of 2) 2. How can you retrieve the value and the label for the option selected by the user from a group of radio buttons? One method for retrieving the selected option's value is to iterate over the options to find the checked option, assign its value property to a variable, and then exit the loop. A second route is to call the querySelector() method on the document, passing in the CSS selector input[name="name"]:checked as the argument, and assign the value property of the returned reference to a variable. To retrieve the selected option's label text, you reference its index value in the labels node list for that input element (which will be 0 if each radio button has just one label). You can assign a reference to the checked input element [obtained using the querySelector() method] to a variable, then assign the value of thatVariable.labels[0].textContent to your label variable. Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Formatting Data Values in a Form (1 of 4) • The toFixed() method • Syntax to return a text string of a number rounded to n decimal places: value.toFixed(n) • Formatting values using a locale string • Syntax used to format numbers (or dates) with various options: value.toLocaleString(locale, {options}) • Sample use of this method to apply local formatting from the user's computer: let total = 14281.478; total.toLocaleString(); // returns "14,281.478" • Sample code to format a number as U.S. currency: let total = 14281.5; total.toLocaleString("en-US", {style: "currency", currency: "USD"}) // returns "$14,281.50" Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Formatting Data Values in a Form (2 of 4) Figure 6-15 Applying the toLocaleString() method Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Formatting Data Values in a Form (3 of 4) Figure 6-16 Displaying numeric values as currency Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Formatting Data Values in a Form (4 of 4) • Making a website international friendly • Support international conventions • Avoid images that contain text strings • Make your layout flexible • Optimize your site for international searches • Provide currency conversion features • Account for cultural differences Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Responding to Form Events (1 of 3) Event Handler Description element.onblur The form element has lost the focus element.onchange The value of element has changed, and element has lost the focus element.onfocus The element has received the focus element.oninput The element has received user input element.oninvalid The element value is invalid form.onreset The form has been reset element.onsearch The user has entered something into a search field element.onselect Text has been selected within the element form.onsubmit The form has been submitted Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Responding to Form Events (2 of 3) Figure 6-18 Adding event listeners to a form Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Responding to Form Events (3 of 3) Figure 6-19 Order costs recalculated for different customer choices Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Working with Hidden Fields (1 of 2) • Hidden fields are often used to make data available to the server processing a web form while hiding it from the user • Sample HTML code for a hidden field: • Sample code to store data in a hidden field (mIndex is the index of the chosen option): orderForm.elements.modelName.value = orderForm.elements.model.options[mIndex].text; • Query string: a long text string containing field names and values from a web form Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Working with Hidden Fields (2 of 2) Figure 6-20 Setting the value of hidden fields Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Exploring Form Submission • Actions within the browser when a submit button (which has the attribute type="submit") is activated: • Field values are checked for invalid data • If no invalid data is found, a submit event is fired • If no errors occur in form submission, a request is sent to the server or other resource handling the form data • Using the submit event • Use the form.submit() method to submit a form without validating data or firing the submit event of the form object • Resetting a form • Forms are reset when a user clicks a reset button • Can also be reset using the form.reset() method Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Validating Form Data with JavaScript (1 of 11) • Validation: the process of checking the form for invalid data • Client-side validation is performed by the user's computer • Server-side validation is handled by the web server • Browser-based validation (native validation): validation derived from HTML attributes to restrict what data the user can enter and CSS style rules that highlight data entry errors • Sample HTML code to mark a required field: • Sample CSS style rule to highlight invalid data: input:invalid { background-color: rgba(221,147,148,0.2); } Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Validating Form Data with JavaScript (2 of 11) Figure 6-22 Payment form Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Validating Form Data with JavaScript (3 of 11) Figure 6-23 Browser validation message and highlighting Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Validating Form Data with JavaScript (4 of 11) • Limitations of browser-based validation: • Validation error message is generic • Validation tests are based on a single field value • Tests are limited to data field entries; cannot be used for calculated items or functions • Constraint Validation API: form validation properties and methods built into JavaScript • Used to supplement native browser tools • Working with the Constraint Validation API • The valid property for a field returns true if it contains valid data • The checkValidity() method returns true for valid data or returns false and fires an invalid event for invalid data • Invalid event: an event that occurs whenever the browser encounters a field whose value does not match the rules specified for its content Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Validating Form Data with JavaScript (5 of 11) • Exploring the ValidityState object • The ValidityState object stores information about the cause of invalid data and is referenced with the expression element.validity • Syntax to check whether a field is invalid due to a specific validity state (e.g., tooLong or valueMissing): element.validity.ValidityState • Creating a custom validation message • Syntax: element.setCustomValidity(msg) • Can be used with an if else block that displays the custom message for a given invalid validity state or an empty string for a valid state Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Validating Form Data with JavaScript (6 of 11) Figure 6-27 Creating the validateName() function Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Validating Form Data with JavaScript (7 of 11) • Responding to invalid data • Use event handlers or event listeners: • For the change event of an input control to check the validity of data upon entry • For the click event of of the form's submit button to check the validity of data on form submission • Validating data with pattern matching • Text string content can be validated against a regular expression, concise code describing the general pattern and content of the characters within a text string • Useful for numerical IDs with specific patterns, such as credit card numbers • Validating a selection list • If the user must change from a dummy option to a valid selection, you must instruct the browser to declare the field invalid if the dummy option's index is left selected Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Validating Form Data with JavaScript (8 of 11) Figure 6-28 Calling the validateName() function Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Validating Form Data with JavaScript (9 of 11) Figure 6-30 Creating the validateCard() function Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Validating Form Data with JavaScript (10 of 11) Figure 6-31 Creating the validateNumber () function Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Validating Form Data with JavaScript (11 of 11) Figure 6-33 Creating the validateMonth() and validateYear() functions Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Activity 6.2: Think, Pair, and Share 1. Form pairs/groups of two to four class members. 2. As a group, choose a purpose/objective for which you might design a short web form—for example, scheduling an appointment, selecting a shirt to purchase, or leaving feedback about services received. Make a list of the fields that the form would require, including the type of input control that you would use to collect the information from the user. 3. Now that you have decided on the fields for your web form, plan how you would ensure that it would submit valid data for processing at the back end. For each field, write notes about the form(s) of validation that you would use and how you would handle invalid data entry by the user. Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Testing a Form Field Against a Regular Expression (1 of 2) • Syntax to check whether a text string conforms to a regular expression pattern: regExp.test(text) • Sample use of the test() method to check whether cardCVC's value is a 4-digit number: let cvc = document.getElementById("cvc"); let isValid = /^\d{4}$/.test(cvc.value) Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Testing a Form Field Against a Regular Expression (2 of 2) Figure 6-34 Creating the validateCVC() function Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Creating a Custom Validity Check (1 of 2) • Checksum algorithm: an algorithm that sums the digits of a number in a particular way and checks whether the sum satisfies specific mathematical conditions • Luhn algorithm (mod 10 algorithm): a checksum algorithm that calculates the sum of the digits in a credit card number after doubling every other digit going backwards from the end of the number; for a legitimate card number, the sum is a multiple of 10 • A function that performs the calculations for a checksum algorithm can be used as the basis of a custom validity check Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Creating a Custom Validity Check (2 of 2) Figure 6-36 Validating the credit card number Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Managing Form Validation (1 of 3) • You can disable the native browser validation tools and supply a custom validation framework (e.g., to support older browsers that do not provide validation or to avoid the browser's error bubbles) • Syntax to disable built-in browser validation: form.noValidate = true; • Alternatively, you can add an event listener to run an anonymous function that calls the preventDefault() method on the associated event object when it hears an invalid event • Event object: the object associated with an event captured by the script Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Managing Form Validation (2 of 3) • You can also disable the built-in validation tools and write a set of procedures to run in response to the submit event for the web form, e.g.: form.onsubmit = myValidation; function myValidation(e) { e.preventDefault(); commands to determine if form passes validation if (form is valid) { commands run when form passes validation return true; } else { commands run when form doesn’t pass validation return false; } Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Managing Form Validation (3 of 3) • Designing an e-commerce website • Provide guests with easy access to your catalog • Provide robust search tools • Make the purchase process easy to navigate • Show discount options and membership deals up front • Use validation tests and security measures • Incorporate social media Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Activity 6.3: Discussion Questions 1. Describe the properties and methods of the form object. 2. Why is the input element the most commonly used form element? Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Self-Assessment 1. Do you enjoy working with web forms using HTML, CSS, and/or JavaScript? Why or why not? How likely is it that you will work with forms regularly in your future career? 2. Which, if any, of the validation approaches described in Chapter 6 have you used before? Which do you expect to be in most frequent use in the category or area of web development that most interests you? Why? 3. As a website user, which forms of user notifications related to invalid entries do you find most and least helpful to you when completing and submitting a web form? Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Summary • Now that the lesson has ended, you should have learned to: • Use JavaScript to reference forms and form elements. • Retrieve values from selection lists. • Retrieve values from option buttons. • Format numeric values and currency values based on local standards. • Write scripts that respond to form events. • Store values in hidden fields. • Understand how web forms are submitted for validation. • Validate web form fields using customized tools. • Test a field value against a regular expression. • Create a customized validation check for credit card data. • Manage the form validation process. Carey/Vodnik, JavaScript for Web Warriors, 7th Edition. © 2022 Cengage. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.