Tell us what’s happening:
Am strugling at the last test ( 32. You should call isValid when you try to submit the form.), tried many diferent configurations but nothing seems to work.
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>
let fullName = document.getElementById("full-name");
let email = document.getElementById("email");
let orderNum = document.getElementById("order-no");
let productCode = document.getElementById("product-code");
let quantity = document.getElementById("quantity");
let complaintsGroup = document.getElementById("complaints-group");
let complaintsDescription = document.getElementById("complaint-description");
let solutionGroup = document.getElementById("solutions-group");
let solutionDescription = document.getElementById("solution-description");
let radioBtns = document.querySelectorAll("input[type='radio']");
let checkboxes = document.querySelectorAll("input[type='checkbox']");
let other = document.getElementById("other-solution");
let otherComp = document.getElementById("other-complaint");
let submitBtn = document.getElementById("submit-btn");
fullName.addEventListener("change", function(){validateForm(); checkBorder(nameValid, fullName)});
email.addEventListener("change", function(){validateForm(); checkBorder(emailValid, email)});
orderNum.addEventListener("change", function(){validateForm(); checkBorder(orderValid, orderNum)});
productCode.addEventListener("change", function(){validateForm(); checkBorder(codeValid, productCode)});
quantity.addEventListener("change", function(){validateForm(); checkBorder(quantityValid, quantity)});
complaintsGroup.addEventListener("change", function(){validateForm(); checkBorder(complaintGroupValid, complaintsGroup)});
complaintsDescription.addEventListener("change", function(){validateForm(); checkBorder(complaintDescrValid, complaintsDescription)});
solutionGroup.addEventListener("change", function(){validateForm(); checkBorder(solutionGroupValid, solutionGroup)});
solutionDescription.addEventListener("change", function(){validateForm(); checkBorder(solutionDescrValid, solutionDescription)});
let nameValid = false;
let emailValid = false;
let orderValid = false;
let codeValid = false;
let quantityValid = false;
let complaintGroupValid = false;
let complaintDescrValid = false;
let solutionGroupValid = false;
let solutionDescrValid = false;
function validateForm(){
nameValid = fullName.value.length > 0;
emailValid = /@[^\s]+\.com$/i.test(email.value);
orderValid = /^2024[0-9]{6}/.test(orderNum.value);
codeValid = /^[a-zA-Z]{2}[0-9]{2}-[a-zA-Z][0-9]{3}-[a-zA-Z]{2}[0-9]$/.test(productCode.value);
quantityValid = quantity.value > 0;
complaintGroupValid = checkCheckables(checkboxes);
complaintDescrValid = !otherComp.checked || complaintsDescription.value.length >= 20;
solutionGroupValid = checkCheckables(radioBtns);
solutionDescrValid = !other.checked || solutionDescription.value.length >= 20;
return {
"full-name": nameValid,
"email": emailValid,
"order-no": orderValid,
"product-code": codeValid,
"quantity": quantityValid,
"complaints-group": complaintGroupValid,
"complaint-description": complaintDescrValid,
"solutions-group": solutionGroupValid,
"solution-description": solutionDescrValid,
}
}
function isValid(formObj){
return (
formObj["full-name"] &&
formObj["email"] &&
formObj["order-no"] &&
formObj["product-code"] &&
formObj["quantity"] &&
formObj["complaints-group"] &&
formObj["complaint-description"] &&
formObj["solutions-group"] &&
formObj["solution-description"]
);
}
function checkBorder(isVal, elem){
if(isVal){
elem.style.borderColor = "green";
return;
}
elem.style.borderColor = "red";
}
function checkCheckables(elemList){
for(let i = 0; i < elemList.length; i++){
if(elemList[i].checked) return true;
}
return false;
}
submitBtn.addEventListener("click", submit);
function submit(){
if (isValid(validateForm())) {
document.getElementById("message-box").textContent = "validation passed";
} else {
checkBorder(nameValid, fullName);
checkBorder(emailValid, email);
checkBorder(orderValid, orderNum);
checkBorder(codeValid, productCode);
checkBorder(quantityValid, quantity);
checkBorder(complaintGroupValid, complaintsGroup);
checkBorder(complaintDescrValid, complaintsDescription);
checkBorder(solutionGroupValid, solutionGroup);
checkBorder(solutionDescrValid, solutionDescription);
document.getElementById("message-box").textContent = "validation failed";
}
}
* {
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;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0
Challenge Information:
Build a Customer Complaint Form - Build a Customer Complaint Form