Tell us what’s happening:
I keep getting running tests
32. You should call isValid when you try to submit the form.
even when I have called isValid in my submit eventListener.
what am i doing wrong?
<!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" required>
</div>
<div>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" placeholder="example@domain.com" pattern="^[^@\s]+@[^@\s]+\.[A-Za-z]+$" required>
</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######" pattern="^2024\d{6}$" required>
</div>
<div>
<label for="product-code">Product Code:</label>
<input type="text" id="product-code" name="product-code" placeholder="XX##-X###-XX#" pattern="^[A-Za-z]{2}\d{2}-[A-Za-z]\d{3}-[A-Za-z]{2}\d$" required>
</div>
<div>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" required>
</div>
</fieldset>
<fieldset id="complaints-group">
<legend>Complaint Reason:</legend>
<div>
<input type="checkbox" id="damaged-product" name="complaint" value="damaged-product" checked required>
<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" minlength="20"></textarea>
</fieldset>
<fieldset id="solutions-group">
<legend>Desired Solution</legend>
<input type="radio" name="solutions" id="refund" value="refund" checked required>
<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" minlength="20"></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>
const formInfo = document.querySelectorAll("#form fieldset");
const personalInfo = document.querySelectorAll("#personal-info input");
const productInfo = document.querySelectorAll("#product-info input");
const complaintReason = document.querySelectorAll("#complaints-group input");
const complaintDescription = document.getElementById("complaint-description");
const desiredSolution = document.querySelectorAll("#solutions-group input");
const solutionDescription = document.getElementById("solution-description");
const submitBtn = document.getElementById("submit-btn");
const message = document.getElementById("message-box");
const complaintContainer = document.getElementById("complaints-group");
const solutionContainer = document.getElementById("solutions-group");
let userInfo = {
"full-name": false,
email: false,
"order-no": false,
"product-code": false,
quantity: false,
"complaints-group": false,
"complaint-description": false,
"solutions-group": false,
"solution-description": false
};
function isValid(formInfoInput) {
return Object.values(formInfoInput).every(v => v === true);
}
function validateForm() {
personalInfo.forEach((personal) => {
userInfo[personal.name] = personal.checkValidity()
})
productInfo.forEach((product) => {
userInfo[product.name] = product.checkValidity();
})
userInfo["complaints-group"] = Array.from(complaintReason).some(reason => reason.checked);
userInfo[complaintDescription.name] = complaintDescription.checkValidity();
userInfo["solutions-group"] = Array.from(desiredSolution).some(solution => solution.checked);
userInfo[solutionDescription.name] = solutionDescription.checkValidity();
otherComplaints();
otherSolution();
return userInfo;
}
personalInfo.forEach((personal) => {
personal.addEventListener("change", (e) => {
if (personal.checkValidity()) {
personal.style.border = "1px solid green";
} else {
personal.style.border = "1px solid red";
}
})
})
productInfo.forEach((product) => {
product.addEventListener("change", (e) => {
if (product.checkValidity()) {
product.style.border = "1px solid green";
} else {
product.style.border = "1px solid red";
}
})
})
complaintReason.forEach((reason) => {
reason.addEventListener("change",
updateComplaintBorder
)
})
desiredSolution.forEach((solution) => {
solution.addEventListener("change", updateSolutionBorder)
})
complaintDescription.addEventListener("input", otherComplaints)
solutionDescription.addEventListener("input", otherSolution)
function updateComplaintBorder() {
let isReasonValid = Array.from(complaintReason);
isReasonValid = isReasonValid.some(r => r.checked);
isReasonValid ? complaintContainer.style.border = "1px solid green" :
complaintContainer.style.border = "1px solid red"
};
function updateSolutionBorder() {
let isSolutionValid = Array.from(desiredSolution)
isSolutionValid = isSolutionValid.some(s => s.checked)
isSolutionValid ? solutionContainer.style.border = "1px solid green" :
solutionContainer.style.border = "1px solid red"
};
function otherComplaints() {
const isOtherComplaintChecked = Array.from(complaintReason).some(reason => reason.value === "other" && reason.checked)
const complaintDescriptionIsValid = complaintDescription.value.trim().length >= 20
if (isOtherComplaintChecked) {
userInfo["complaint-description"] =
complaintDescriptionIsValid;
complaintDescriptionIsValid ? complaintDescription.style.border = "1px solid green" : complaintDescription.style.border = "1px solid red"
} else {
userInfo["complaint-description"] = true;
complaintContainer.style.border = "1px solid green"
}
}
function otherSolution() {
const isOtherSolutionChecked = Array.from(desiredSolution).some(solution => solution.value === "other" && solution.checked)
const solutionDescriptionIsValid = solutionDescription.value.trim().length >= 20
if (isOtherSolutionChecked) {
userInfo["solution-description"] = solutionDescriptionIsValid;
solutionDescriptionIsValid ? solutionDescription.style.border = "1px solid green" : solutionDescription.style.border = "1px solid red"
} else {
userInfo["solution-description"] = true;
solutionContainer.style.border = "1px solid green"
}
}
submitBtn.addEventListener("click", (e) => {
e.preventDefault();
const formInput = validateForm();
const valid = isValid(formInput)
if (!valid) {
message.textContent = "Please correct the highligted fields"
} else {
message.textContent = "Form Submitted"
}
personalInfo.forEach(p => p.style.border = p.checkValidity() ? "1px solid green" : "1px solid red");
productInfo.forEach(p => p.style.border = p.checkValidity() ? "1px solid green" : "1px solid red");
updateComplaintBorder();
updateSolutionBorder();
otherComplaints();
otherSolution();
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36
Challenge Information:
Build a Customer Complaint Form - Build a Customer Complaint Form
