Tell us what’s happening:
Hello all!
I have tried different ways of writing the submit event listener and isValid function but I can’t get test 30 to pass…
“30. Your isValid function should take the validateForm() as its argument and return true when all the form fields have been filled correctly.”
Can you see what’s wrong with my code?
Thanks a bunch!!!
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" aria-live="polite"></span>
</div>
</form>
<script src="script.js"></script>
</body>
</html>
* {
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;
}
.invalid {
border-color :red !important;
}
.valid {
border-color :green !important;
}
const fullName = document.getElementById("full-name");
const email = document.getElementById("email");
const orderNbr = document.getElementById("order-no");
const quantity = document.getElementById("quantity");
const productCode = document.getElementById("product-code");
const complaintGroup = document.getElementById("complaints-group");
const complaintDesc = document.getElementById("complaint-description");
const solutionGroup = document.getElementById("solutions-group");
const solutionDesc = document.getElementById("solution-description");
const submitBtn = document.getElementById("submit-btn");
const form = document.getElementById("form");
const complaintOptions = document.querySelectorAll('input[name="complaint"]');
const solutionOptions = document.querySelectorAll('input[name="solutions"]');
let validFields = {
"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
};
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const productCodeRegex = /^[a-zA-z]{2}\d{2}-[a-zA-z]{1}\d{3}-[a-zA-z]{2}\d{1}$/;
const orderNbrRegex = /^2024\d{6}$/;
const quantityRegex = /^[1-9]\d*$/;
const compaintDescRegex = /^.{20,}$/;
const solutionDescRegex = /^.{20,}$/;
function validateName() {
if (fullName.value) {
validFields["full-name"] = true;
fullName.style.borderColor = "green";
} else {
validFields["full-name"] = false;
fullName.style.borderColor = "red";
}
}
function validateEmail() {
if (email.value && emailRegex.test(email.value)) {
validFields["email"] = true;
email.style.borderColor = "green";
} else {
validFields["email"] = false;
email.style.borderColor = "red";
}
}
function validateOrderNbr() {
if (orderNbrRegex.test(orderNbr.value)) {
validFields["order-no"] = true;
orderNbr.style.borderColor = "green";
} else {
validFields["order-no"] = false;
orderNbr.style.borderColor = "red";
}
}
function validateProductCode() {
if (productCode.value && productCodeRegex.test(productCode.value)) {
validFields["product-code"] = true;
productCode.style.borderColor = "green";
} else {
validFields["product-code"] = false;
productCode.style.borderColor = "red";
}
}
function validateQuantity() {
if (quantity.value && quantityRegex.test(quantity.value)) {
validFields["quantity"] = true;
quantity.style.borderColor = "green";
} else {
validFields["quantity"] = false;
quantity.style.borderColor = "red";
}
}
function validateComplaint() {
const isChecked = Array.from(complaintOptions).some(option => option.checked);
validFields["complaints-group"] = isChecked;
complaintGroup.style.borderColor = isChecked ? "green" : "red";
}
function validateComplaintDesc() {
if (compaintDescRegex.test(complaintDesc.value)) {
validFields["complaint-description"] = true;
complaintDesc.style.borderColor = "green";
} else {
validFields["complaint-description"] = false;
complaintDesc.style.borderColor = "red";
}
}
function validateSolution() {
const isChecked = Array.from(solutionOptions).some(option => option.checked);
validFields["solutions-group"] = isChecked;
solutionGroup.style.borderColor = isChecked ? "green" : "red";
}
function validateSolutionDesc() {
if (solutionDesc.value && solutionDescRegex.test(solutionDesc.value)) {
validFields["solution-description"] = true;
solutionDesc.style.borderColor = "green";
} else {
validFields["solution-description"] = false;
solutionDesc.style.borderColor = "red";
}
};
function validateForm() {
validateName();
validateEmail();
validateOrderNbr();
validateProductCode();
validateQuantity();
validateComplaint();
validateComplaintDesc();
validateSolution();
validateSolutionDesc();
return validFields;
}
function isValid(fields) {
return Object.values(fields).every(Boolean);
}
console.log(isValid(validateForm()));
fullName.addEventListener("change", validateName);
email.addEventListener("change", validateEmail);
orderNbr.addEventListener("change", validateOrderNbr);
productCode.addEventListener("change", validateProductCode);
quantity.addEventListener("change", validateQuantity);
complaintDesc.addEventListener("change", validateComplaintDesc);
solutionDesc.addEventListener("change", validateSolutionDesc);
complaintOptions.forEach(option => option.addEventListener("change", validateComplaint));
solutionOptions.forEach(option => option.addEventListener("change", validateSolution));
form.addEventListener("submit", (e) => {
console.log(isValid(validateForm()))
if(!isValid(validateForm())){
e.preventDefault()
alert("Fill out all required areas")
}else if(isValid(validateForm())) {
alert("Your form has been submitted")
form.submit();
}
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36
Challenge Information:
Build a Customer Complaint Form - Build a Customer Complaint Form