Tell us what’s happening:
I keep getting test 30 wrong and I can’t figure out why, any help is appreciated!! 
HTML and CSS unchanged
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
const form = document.getElementById("form");
const fullName = document.getElementById("full-name");
const email = document.getElementById("email");
const orderNo = document.getElementById("order-no");
const productCode = document.getElementById("product-code");
const quantity = document.getElementById('quantity');
const complaintTypes = document.getElementById("complaints-group");
const complaintDescription = document.getElementById("complaint-description");
const complaintGroup = complaintTypes.querySelectorAll('input[type="checkbox"]');
const solutionTypes = document.getElementById("solutions-group");
const solutionDescription = document.getElementById("solution-description");
const solutionGroup = solutionTypes.querySelectorAll('input[type="radio"]');
const damagedProduct = document.getElementById("damaged-product");
const nonconforming = document.getElementById("nonconforming-product");
const delayedDispatch = document.getElementById("delayed-dispatch");
const refund = document.getElementById("refund");
const exchange = document.getElementById("exchange");
const otherComplaint = document.getElementById("other-complaint");
const otherSolution = document.getElementById("other-solution");
const submitBtn = document.getElementById("submit-btn");
const emailRegex = /.+@.+[.org|.com]/;
const orderNoRegex = /^2024\d{6}$/;
const productCodeRegex = /[\w|\W]{2}[\d]{2}-[\w|\W][\d]{3}-[\w|\W]{2}[\d]/;
const validateForm = () => {
const complaintObject = {
"full-name": fullName.value ? true : false,
"email": emailRegex.test(email.value),
"order-no": orderNoRegex.test(orderNo.value),
"product-code": productCodeRegex.test(productCode.value),
"quantity": quantity.value > 0 ? true: false,
"complaints-group": Array.from(complaintGroup).some((item) => item.checked),
"complaint-description": otherComplaint.checked && complaintDescription.value.length >= 20 || damagedProduct.checked || nonconforming.checked || delayedDispatch.checked ? true: false,
"solutions-group": Array.from(solutionGroup).some(item => item.checked),
"solution-description": otherSolution.checked && solutionDescription.value.length >= 20 || refund.checked || exchange.checked ? true: false
};
return complaintObject
};
const isValid = (obj) => Object.keys(obj).every((item) => item === true);
console.log(isValid(validateForm()));
fullName.addEventListener("change", () => {
const valid = validateForm()
valid["full-name"] ? fullName.style.borderColor = "green" : fullName.style.borderColor = "red"
});
email.addEventListener("change", () => {
const valid = validateForm()
valid["email"] ? email.style.borderColor = "green" : email.style.borderColor = "red"
});
orderNo.addEventListener("change", () => {
const valid = validateForm()
valid["order-no"] ? orderNo.style.borderColor = "green" : orderNo.style.borderColor = "red"
});
productCode.addEventListener("change", () => {
const valid = validateForm()
valid["product-code"] ? productCode.style.borderColor = "green" : productCode.style.borderColor = "red"
});
quantity.addEventListener("change", () => {
const valid = validateForm()
valid["quantity"] ? quantity.style.borderColor = "green" : quantity.style.borderColor = "red"
});
complaintDescription.addEventListener("change", () => {
const valid = validateForm()
valid["complaint-description"] ? complaintDescription.style.borderColor = "green" : complaintDescription.style.borderColor = "red"
});
solutionDescription.addEventListener("change", () => {
const valid = validateForm()
valid["solution-description"] ? solutionDescription.style.borderColor = "green" : solutionDescription.style.borderColor = "red"
});
complaintTypes.addEventListener("change", () => {
const valid = validateForm()
complaintTypes.style.borderColor = valid["complaints-group"] ? "green" : "red";
});
solutionTypes.addEventListener("change", () => {
const valid = validateForm()
solutionTypes.style.borderColor = valid["solutions-group"] ? "green" : "red";
});
form.addEventListener("submit", (e) => {
if(!isValid(validateForm())){
e.preventDefault()
alert("fill out all required areas")
}else if(isValid(validateForm())) {
alert("your form has been submitted")
}
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36 Edg/138.0.0.0
Challenge Information:
Build a Customer Complaint Form - Build a Customer Complaint Form
