Index.Html:

Delivery

Please fix the indicated problems and then resubmit your form.

Billing Address

First name:

Last name:

Street Address:

Gender:

Male

Female

Other

Phone Number:

Year:

2015

2016

2017

2018

2019

2020

2021

2022

2023

Shipping Address

same as billing address

First name:

Last name:

Street Address:

Gender:

Male

Female

Other

Phone Number:

Year:

2015

2016

2017

2018

2019

2020

2021

2022

2023

© Copyright Audrey Bernier Larose. Modified by Julio Vinicius for COMP125 Midterm

/*

Filename: script.js

*/

"use strict"

/* removing default values for gender and year select lists */

function removeSelectDefaults()

{

var selects = document.getElementsByTagName("select");

for (var i = 0; i < selects.length; i++)

{

selects[i].selectedIndex = -1;

}

}

/* Copying values from billing to shipping fields */

function copyBillingAddress()

{

if (document.getElementById("sameAddr").checked) {

var billingInputs = document.querySelectorAll("#billingAddress input[type=text], #billingAddress input[type=tel], #billingAddress input[type=email], #billingAddress input[type=number]");

var shippingInputs = document.querySelectorAll("#shippingAddress input[type=text], #shippingAddress input[type=tel], #shippingAddress input[type=email], #shippingAddress input[type=number]");

for (var i = 0; i < billingInputs.length; i++) {

shippingInputs[i].value = billingInputs[i].value;

}

}

}

/* Validates addresses fieldsets */

function validateAddresses(fieldsetId)

{

var inputs = document.querySelectorAll("#" + fieldsetId + " input[type=text], #" + fieldsetId + " input[type=tel], #" + fieldsetId + " input[type=email], #" + fieldsetId + " input[type=number]");

for (var i = 0; i < inputs.length; i++) {

if (inputs[i].hasAttribute("required") && inputs[i].value.trim() === "") {

inputs[i].setCustomValidity("Please fill out this field.");

} else {

inputs[i].setCustomValidity("");

}

}

}

/* Validating form */

function validateForm()

{

validateAddresses("billingAddress");

validateAddresses("shippingAddress");

if (document.getElementsByTagName("form")[0].checkValidity()) {

document.getElementById("errorMessage").style.display = "none";

} else {

document.getElementById("errorMessage").style.display = "block";

}

}

/* Resets the page */

function resetPage()

{

location.reload();

}

/* Adds event listeners */

function createEventListeners()

{

document.getElementById("submitBtn").addEventListener("click", validateForm);

document.getElementById("sameAddr").addEventListener("click", copyBillingAddress);

document.getElementById("resetBtn").addEventListener("click", resetPage);

}

/* Runs initial form configuration functions */

function setUpPage()

{

removeSelectDefaults();

createEventListeners();

}

/* Runs setup function when page finishes loading */

window.addEventListener("load", setUpPage);

Question: 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.

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.

3. Remove default values from select elements by using JavaScript to set the selected Index property to -1 (selectedIndex = -1).

4. Add a placeholder to each field to increase the content accuracy.

The values in the billing address doesn't get copied to the shipping after I Tick the checkbox.