Tell us what’s happening:
My last test won’t accept my code even though I did everything like calling the function many times and even change the whole function that takes the argument of formvalidation function.
Your code so far
<!-- file: index.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 required 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######" maxlength="10">
</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" checked>
<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" checked>
<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" aria-live="polite"></span>
<button type="reset" id="clear-btn">Clear</button>
</div>
</form>
<script src="script.js"></script>
</body>
</html>
/* file: styles.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;
}
.error {
border: 2px solid red;
}
/* file: script.js */ const form = document.getElementById(“form”); const formChildren = document.querySelectorAll(“#form input, #form textarea, #form select”); 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 complaintsReasonGroup = document.querySelectorAll(“#complaints-group input[type=‘checkbox’]”); const otherComplaint = document.getElementById(“other-complaint”); const complaintDescription = document.getElementById(“complaint-description”); const solutionsGroup = document.querySelectorAll(“#solutions-group input[type=‘radio’]”); const refund = document.getElementById(“refund”); const exchange = document.getElementById(“exchange”); const otherSolution = document.getElementById(“other-solution”); const solutionDescription = document.getElementById(“solution-description”); const submitBtn = document.getElementById(“submit-btn”); const messageBox = document.getElementById(“message-box”); // const validFullName = /^[A-Za-z]+(?:[‘-]?[A-Za-z]+)*(?:\s+[A-Za-z]+(?:[’-]?[A-Za-z]+)*)+$/; const validOrderNo = /2024[\d]{6}/; const validProductCode = /^([a-zA-Z]{2}[\d]{2}\-[a-zA-Z]{1}[\d]{3}-[a-zA-Z]{2}[\d]{1})/; function validateForm() { const isSolutionsGroup = Array.from(solutionsGroup).some(cb => cb.checked); const isComplaintsGroup = Array.from(complaintsReasonGroup).some(cb => cb.checked); return { “full-name”: fullName.value!==“”, “email”: email.validity.valid, “order-no”: validOrderNo.test(orderNo.value) && orderNo.value.length == 10, “product-code”: validProductCode.test(productCode.value), “quantity”: Number(quantity.value)>0, “complaints-group”: isComplaintsGroup, “complaint-description”: (otherComplaint.checked) ? complaintDescription.value.length >= 20 : isComplaintsGroup, “solutions-group”: isSolutionsGroup, “solution-description”: (otherSolution.checked) ? solutionDescription.value.length >= 20 : isSolutionsGroup, } } const isValid = (results) => Object.values(results).every(Boolean); formChildren.forEach(child => { child.addEventListener(“change”, () => { messageBox.style.display = “none”; const results = validateForm(); Object.entries(results).forEach(([key, isFieldValid]) => { const el = document.getElementById(key); if (el) el.style.border = isFieldValid ? “2px solid green” : “2px solid red”; }); }); }); submitBtn.addEventListener(“click”, (e) => { e.preventDefault(); const results = validateForm(); Object.entries(results).forEach(([key, isValidkey]) => { const el = document.getElementById(key); if (el) { // only for fields that exist as inputs/textareas el.style.border = isValidkey ? “2px solid green” : “2px solid red”; } }); const formIsValid = isValid(results); if (formIsValid) { messageBox.textContent = “Please wait”; messageBox.style.color = “green”; setTimeout(() => { messageBox.style.display = “flex”; messageBox.textContent = “Form submitted successfully!”; // form.submit(); }, 5000); } else { messageBox.style.display = “flex”; messageBox.textContent = “Please, fill out the required fields correctly before submitting.”; messageBox.style.color = “red”; } });
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36 Edg/139.0.0.0
Challenge Information:
Build a Customer Complaint Form - Build a Customer Complaint Form