Tell us what’s happening:
It’s the last step I need to pass. What could be the mistake with my code in here?
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<title>Customer Complaint Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Complaint Form</h1>
<form id="form">
<fieldset id="personal-info">
<div>
<label for="full-name">Full Name:</label>
<input type="text" id="full-name" name="full-name" placeholder="John Doe">
</div>
<div>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" placeholder="example@domain.com">
</div>
</fieldset>
<hr>
<fieldset id="product-info">
<div>
<label for="order-no">Order No:</label>
<input type="text" id="order-no" name="order-no" placeholder="2024######">
</div>
<div>
<label for="product-code">Product Code:</label>
<input type="text" id="product-code" name="product-code" placeholder="XX##-X###-XX#">
</div>
<div>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1">
</div>
</fieldset>
<fieldset id="complaints-group">
<legend>Complaint Reason:</legend>
<div>
<input type="checkbox" id="damaged-product" name="complaint" value="damaged-product">
<label for="damaged-product">Damaged Product</label>
</div>
<div>
<input type="checkbox" id="nonconforming-product" name="complaint" value="nonconforming-product">
<label for="nonconforming-product">Nonconforming Product</label>
</div>
<div>
<input type="checkbox" id="delayed-dispatch" name="complaint" value="delayed-dispatch">
<label for="delayed-dispatch">Delayed Dispatch</label>
</div>
<div>
<input type="checkbox" id="other-complaint" name="complaint" value="other">
<label for="other-complaint">Other</label>
</div>
</fieldset>
<div id="complaint-description-container">
<legend>Description of Complaint Reason</legend>
<textarea placeholder="Describe the reason of your complaint in at least 20 characters"
name="complaint-textarea" id="complaint-description"></textarea>
</div>
<fieldset id="solutions-group">
<legend>Desired Solution</legend>
<input type="radio" name="solutions" id="refund" value="refund">
<label for="refund">Refund</label>
<input type="radio" name="solutions" id="exchange" value="exchange">
<label for="exchange">Exchange</label>
<input type="radio" name="solutions" id="other-solution" value="other">
<label for="other-solution">Other</label>
</fieldset>
<div id="solution-description-container">
<legend>Description of Desired Solution</legend>
<textarea placeholder="Describe the desired solution to your issue in at least 20 characters"
name="solution-textarea" id="solution-description"></textarea>
</div>
<div id="btn-container">
<button type="submit" id="submit-btn">Submit</button>
<span id="message-box"></span>
</div>
</form>
<script src="script.js"></script>
</body>
</html>
const form = document.getElementById("form");
const fullName = document.getElementById("full-name");
const email = document.getElementById("email");
const orderNumber = document.getElementById("order-no");
const productCode = document.getElementById("product-code");
const quantity = document.getElementById("quantity");
const complaintsGroup = document.getElementById('complaints-group');
const complaintDescription = document.getElementById("complaint-description");
const solutionsGroup = document.getElementById("solutions-group");
const solutionDescription = document.getElementById("solution-description");
// check validity
const isValid = (formData) => {
return Object.values(formData).every(value => value === true);
}
const validateForm = () => {
const emailRegex = /^[a-zA-Z0-9._+-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,6}$/;
const orderNumberRegex = /^2024\d{6}$/;
const productCodeRegex = /^[a-zA-Z]{2}\d{2}-[a-zA-Z]{1}\d{3}-[a-zA-Z]{2}\d{1}$/;
const checkboxes = complaintsGroup.querySelectorAll('input[type="checkbox"]');
const otherComplaint = document.getElementById("other-complaint");
const radios = solutionsGroup.querySelectorAll('input[type="radio"]');
const otherSolution = document.getElementById("other-solution");
return {
"full-name": fullName.value ? true : false,
"email": emailRegex.test(email.value),
"order-no": orderNumberRegex.test(orderNumber.value),
"product-code": productCodeRegex.test(productCode.value),
"quantity": !isNaN(quantity.value) && quantity.value > 0,
"complaints-group": Array.from(checkboxes).some(checkbox => checkbox.checked),
"complaint-description": otherComplaint.checked && complaintDescription.value.length >= 20,
"solutions-group": Array.from(radios).some(radio => radio.checked),
"solution-description": otherSolution.checked && solutionDescription.value.length >= 20,
};
}
// change border color
fullName.addEventListener("change", () => {
const formValidation = validateForm();
fullName.style.borderColor = formValidation["full-name"] ? "green" : "red";
})
email.addEventListener("change", () => {
const formValidation = validateForm();
email.style.borderColor = formValidation["email"] ? "green" : "red";
})
orderNumber.addEventListener("change", () => {
const formValidation = validateForm();
orderNumber.style.borderColor = formValidation["order-no"] ? "green" : "red";
})
productCode.addEventListener("change", () => {
const formValidation = validateForm();
productCode.style.borderColor = formValidation["product-code"] ? "green" : "red";
})
quantity.addEventListener("change", () => {
const formValidation = validateForm();
quantity.style.borderColor = formValidation["quantity"] ? "green" : "red";
})
complaintsGroup.addEventListener("change", () => {
const formValidation = validateForm();
complaintsGroup.style.borderColor = formValidation["complaints-group"] ? "green" : "red";
})
complaintDescription.addEventListener("change", () => {
const formValidation = validateForm();
complaintDescription.style.borderColor = formValidation["complaint-description"] ? "green" : "red";
})
solutionsGroup.addEventListener("change", () => {
const formValidation = validateForm();
solutionsGroup.style.borderColor = formValidation["solutions-group"] ? "green" : "red";
})
solutionDescription.addEventListener("change", () => {
const formValidation = validateForm();
solutionDescription.style.borderColor = formValidation["solution-description"] ? "green" : "red";
})
// on submit
form.addEventListener("submit", (e) => {
if (isValid(validateForm())) {
console.log("form submitted.");
console.log(validateForm());
} else {
console.log("form declined.");
console.log(validateForm());
return;
}
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0
Challenge Information:
Build a Customer Complaint Form - Build a Customer Complaint Form
