All tests passed but cannot pass test no. 32 “Your isValid function should take the validateForm() as its argument and return true when all the form fields have been filled correctly.”
Tried everything I know so far but nothing worked.
<!-- 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 orderNumber = document.getElementById("order-no");
const productCode = document.getElementById("product-code");
const quantity = document.getElementById("quantity");
const complaintsGroup = document.getElementById('complaints-group');
const complaintDesc = document.getElementById("complaint-description");
const solutionsGroup = document.getElementById("solutions-group");
const solutionDesc = document.getElementById("solution-description");
const msg = document.getElementById("message-box");
function isValid(formdata) {
return Object.values(formdata).every(elt => elt === true);
}
function validateForm() {
const emailRegex = /^[a-z0-9._+-]+@[a-z0-9-]+\.[a-z]{2,}$/i;
const orderNumRegex = /^2024\d{6}$/;
const productCodeRegex = /^[a-zA-Z]{2}\d{2}-[a-zA-Z]\d{3}-[a-zA-Z]{2}\d$/;
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": orderNumRegex.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 && complaintDesc.value.length >= 20) || (!otherComplaint.checked && complaintDesc.value === ""),
"solutions-group": Array.from(radios).some(radio => radio.checked),
"solution-description": (otherSolution.checked && solutionDesc.value.length >= 20) || (!otherSolution.checked && solutionDesc.value === ""),
};
}
fullName.addEventListener("change", () => {
fullName.style.borderColor = validateForm()["full-name"] ? "green" : "red";
});
email.addEventListener("change", () => {
email.style.borderColor = validateForm()["email"] ? "green" : "red";
});
orderNumber.addEventListener("change", () => {
orderNumber.style.borderColor = validateForm()["order-no"] ? "green" : "red";
});
productCode.addEventListener("change", () => {
productCode.style.borderColor = validateForm()["product-code"] ? "green" : "red";
});
quantity.addEventListener("change", () => {
quantity.style.borderColor = validateForm()["quantity"] ? "green" : "red";
});
complaintsGroup.addEventListener("change", () => {
complaintsGroup.style.borderColor = validateForm()["complaints-group"] ? "green" : "red";
});
complaintDesc.addEventListener("change", () => {
complaintDesc.style.borderColor = validateForm()["complaint-description"] ? "green" : "red";
});
solutionsGroup.addEventListener("change", () => {
solutionsGroup.style.borderColor = validateForm()["solutions-group"] ? "green" : "red";
});
solutionDesc.addEventListener("change", () => {
solutionDesc.style.borderColor = validateForm()["solution-description"] ? "green" : "red";
})
form.addEventListener("submit", (e) => {
e.preventDefault();
if(isValid(validateForm())) {
msg.innerText = "Submitted!!!";
console.log(validateForm());
} else {
msg.innerText = "Not submitted";
console.log(validateForm());
}
})
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36
Build a Customer Complaint Form - Build a Customer Complaint Form
GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-customer-complaint-form/67279fe50237291f80eed8b8.md at main · freeCodeCamp/freeCodeCamp · GitHub
dhess
May 19, 2026, 4:25pm
2
Hey there,
Please update the message to include your HTML and CSS. The code was too long to be automatically inserted by the help button.
When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.Note: Backticks (`) are not single quotes (').
Here is the whole code;
HTML :
```
<!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>
<fieldset 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>
</fieldset>
<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>
<fieldset 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>
</fieldset>
<div id="btn-container">
<button type="submit" id="submit-btn">Submit</button>
<span id="message-box" aria-live="polite"></span>
</div>
</form>
<script src="script.js"></script>
</body>
</html>
```
CSS:
```
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
#form {
max-width: 70%;
margin: auto;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 10px;
}
input {
border-color: rgb(118, 118, 118);
}
#personal-info input, #product-info input {
width: 100%;
margin-bottom: 10px;
}
fieldset {
margin-bottom: 10px;
border-radius: 5px;
border-color: rgb(118, 118, 118);
}
textarea {
width: 100%;
border-color: rgb(118, 118, 118);
}
#btn-container {
display: flex;
justify-content: space-between;
align-items: center;
}
#submit-btn, #clear-btn {
margin: 10px 15px 0;
}
```
JS:
```
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 complaintDesc = document.getElementById("complaint-description");
const solutionsGroup = document.getElementById("solutions-group");
const solutionDesc = document.getElementById("solution-description");
const msg = document.getElementById("message-box");
function isValid(formdata) {
return Object.values(formdata).every(elt => elt === true);
}
function validateForm() {
const emailRegex = /^[a-z0-9._+-]+@[a-z0-9-]+\.[a-z]{2,}$/i;
const orderNumRegex = /^2024\d{6}$/;
const productCodeRegex = /^[a-zA-Z]{2}\d{2}-[a-zA-Z]\d{3}-[a-zA-Z]{2}\d$/;
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": orderNumRegex.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 && complaintDesc.value.length >= 20) || (!otherComplaint.checked && complaintDesc.value === ""),
"solutions-group": Array.from(radios).some(radio => radio.checked),
"solution-description": (otherSolution.checked && solutionDesc.value.length >= 20) || (!otherSolution.checked && solutionDesc.value === ""),
};
}
fullName.addEventListener("change", () => {
fullName.style.borderColor = validateForm()["full-name"] ? "green" : "red";
});
email.addEventListener("change", () => {
email.style.borderColor = validateForm()["email"] ? "green" : "red";
});
orderNumber.addEventListener("change", () => {
orderNumber.style.borderColor = validateForm()["order-no"] ? "green" : "red";
});
productCode.addEventListener("change", () => {
productCode.style.borderColor = validateForm()["product-code"] ? "green" : "red";
});
quantity.addEventListener("change", () => {
quantity.style.borderColor = validateForm()["quantity"] ? "green" : "red";
});
complaintsGroup.addEventListener("change", () => {
complaintsGroup.style.borderColor = validateForm()["complaints-group"] ? "green" : "red";
});
complaintDesc.addEventListener("change", () => {
complaintDesc.style.borderColor = validateForm()["complaint-description"] ? "green" : "red";
});
solutionsGroup.addEventListener("change", () => {
solutionsGroup.style.borderColor = validateForm()["solutions-group"] ? "green" : "red";
});
solutionDesc.addEventListener("change", () => {
solutionDesc.style.borderColor = validateForm()["solution-description"] ? "green" : "red";
})
form.addEventListener("submit", (e) => {
e.preventDefault();
const obj = validateForm();
console.log(obj);
if (!isValid(obj)) {
msg.innerText = "Submitted!!!";
} else {
msg.innerText = "Not submitted";
}
})
```
dhess
May 19, 2026, 6:33pm
4
All I can tell you is that the tests are complaining about your solutions description field evaluating to false when it’s expected to be true, but I’ve been looking at your code and testing in the preview window, and I don’t see the issue.
Unrelated but still an issue is the code in your form listener. You show “Submitted” when the object is not valid and you never actually submit the form (understandable for testing).
I fixed the form listener as per your instructions but the isValid() function still doesn’t work. I am confused since no other test is failing except no. 32.
And I don’t understand what’s the issue with the solutions description part.
I appreciate your help.
```
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 complaintDesc = document.getElementById("complaint-description");
const solutionsGroup = document.getElementById("solutions-group");
const solutionDesc = document.getElementById("solution-description");
const msg = document.getElementById("message-box");
function isValid(formdata) {
return Object.values(formdata).every(elt => elt === true);
}
function validateForm() {
const emailRegex = /^[a-z0-9._+-]+@[a-z0-9-]+\.[a-z]{2,}$/i;
const orderNumRegex = /^2024\d{6}$/;
const productCodeRegex = /^[a-zA-Z]{2}\d{2}-[a-zA-Z]\d{3}-[a-zA-Z]{2}\d$/;
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": orderNumRegex.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 && complaintDesc.value.length >= 20) || (!otherComplaint.checked && complaintDesc.value === ""),
"solutions-group": Array.from(radios).some(radio => radio.checked),
"solution-description": (otherSolution.checked && solutionDesc.value.length >= 20) || (!otherSolution.checked && solutionDesc.value === ""),
};
}
fullName.addEventListener("change", () => {
fullName.style.borderColor = validateForm()["full-name"] ? "green" : "red";
});
email.addEventListener("change", () => {
email.style.borderColor = validateForm()["email"] ? "green" : "red";
});
orderNumber.addEventListener("change", () => {
orderNumber.style.borderColor = validateForm()["order-no"] ? "green" : "red";
});
productCode.addEventListener("change", () => {
productCode.style.borderColor = validateForm()["product-code"] ? "green" : "red";
});
quantity.addEventListener("change", () => {
quantity.style.borderColor = validateForm()["quantity"] ? "green" : "red";
});
complaintsGroup.addEventListener("change", () => {
complaintsGroup.style.borderColor = validateForm()["complaints-group"] ? "green" : "red";
});
complaintDesc.addEventListener("change", () => {
complaintDesc.style.borderColor = validateForm()["complaint-description"] ? "green" : "red";
});
solutionsGroup.addEventListener("change", () => {
solutionsGroup.style.borderColor = validateForm()["solutions-group"] ? "green" : "red";
});
solutionDesc.addEventListener("change", () => {
solutionDesc.style.borderColor = validateForm()["solution-description"] ? "green" : "red";
})
form.addEventListener("submit", (e) => {
e.preventDefault();
console.log(isValid(validateForm()));
if (isValid(validateForm())) {
msg.innerText = "Submitted";
} else {
msg.innerText = "Not submitted";
}
})
```
dhess
May 19, 2026, 7:15pm
6
Well, it wasn’t much help. Maybe someone else can find the exact issue.
oh okay. Then I guess I’ll just keep trying until I can find the issue.
dhess
May 22, 2026, 2:22pm
8
Hi @chaotic.stardust ,
Please remove these from your conditions to pass the tests:
Sorry that took so long…
Happy coding!
ohh that worked! Thank you so much!
