Tell us what’s happening:
Trying post again, with code! Auto-testing says my code is failing in three places (below), but as far as I can tell it is working. Any insights appreciated
- validateForm()[“product-code”] true when #product-code contains valid value, false otherwise.
A change event triggered on #product-code, sets border color to green if contains a valid value, red otherwise.
isValid function should take validateForm() as its argument and return true when all the form fields have been filled correctly
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 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>
/* 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;
}
/* file: script.js */
/* form fields. */
const complaintForm = document.getElementById('form');
// fieldset
const personalInfo = document.getElementById('personal-info');
const fullName = personalInfo.elements['full-name'];
const email = personalInfo.elements['email'];
// fieldset
const productFieldset = document.getElementById('product-info');
const orderNo = productFieldset.elements['order-no'];
const productCode = productFieldset.elements['product-code'];
const quantity = productFieldset.elements['quantity'];
// fieldset
const complaintsFieldset = document.getElementById('complaints-group');
// complaint checkboxes array, damaged-product, nonconforming-product, delayed-dispatch
// const complaints = complaintsFieldset.elements;
const complaints = document.querySelectorAll('input[name="complaint"]');
const complaintsDescFieldset = document.getElementById('complaint-description-container');
//const complaintsDesc = complaintsDescFieldset.elements['complaint-description'];
const complaintsDesc = document.getElementById('complaint-description');
// fieldset
const solutionsFieldset = document.getElementById('solutions-group');
// solution checkboxes, refund, exchange
const solutions = document.querySelectorAll('input[name="solutions"]');
const solutionOther = solutionsFieldset.elements['other-solution'];
// fieldset
const solutionsDescFieldset = document.getElementById('solution-description-container');
const solutionsDesc = solutionsDescFieldset.elements['solution-description'];
const messageBox = document.getElementById("message-box");
// FORM OBJECT
const formFields = {
'full-name': fullName,
'email': email,
'order-no': orderNo,
'product-code': productCode,
'quantity': quantity,
'complaints-group': Array.from(complaints),
'complaint-description': complaintsDesc,
'solutions-group': Array.from(solutions),
'solution-description': solutionsDesc,
};
function validateForm() {
//#email is valid address format
const rgxEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
//#order-no is 10-digits, starting with 2024
const rgxOrderNo = /2024\d{6}/;
//#product-code pattern is XX##-X###-XX# (x upper/lower), #=digit
const rgxProdCode = /[a-z]{2}\d{2}-[a-z]\d{3}-[a-z]\d{2}/i;
const complaintsArr = Array.from(complaints).map((i) => { return i.checked });
const solutionsArr = Array.from(solutions).map((i) => { return i.checked });
// FORM VALIDATION OBJECT
const formValidation = {
'full-name': Boolean(fullName.value.trim()),
'email': rgxEmail.test(email.value.trim()),
'order-no': rgxOrderNo.test(orderNo.value.trim()),
'product-code': rgxProdCode.test(productCode.value.trim()),
'quantity': Number(quantity.value) > 0,
'complaints-group': complaintsArr.some((i) => { return i }),
'complaint-description': null,
'solutions-group': solutionsArr.some((i) => { return i }),
'solution-description': null,
}
//console.log(formValidation['complaints-group']);
if (complaintsArr[3]) {
let complaintsDescVal = complaintsDesc.value.trim();
if (complaintsDescVal.length < 20) {
formValidation['complaint-description'] = false;
} else {
formValidation['complaint-description'] = true
}
} else if (!complaintsArr[3]) {
formValidation["complaint-description"] === null;
}
if (solutionsArr[2]) {
let solutionsDescVal = solutionsDesc.value.trim();
if (solutionsDescVal.length < 20) {
formValidation['solution-description'] = false;
} else {
formValidation['solution-description'] = true
}
} else if (!solutionsArr[3]) {
formValidation["solution-description"] === null;
}
if (formValidation["complaint-description"] === null) delete formValidation["complaint-description"];
if (formValidation["solution-description"] === null) delete formValidation["solution-description"];
//console.log(formValidation);
return formValidation;
}
function isValid(obj) {
return Object.values(obj).every(function (i) {
return i;
});
}
// event listener
Object.keys(formFields).forEach(function (key) {
document.getElementById(key).addEventListener("change", function (e) {
var validationObject = validateForm();
if (Object.values(validationObject).every(function (val) {
return val;
})) messageBox.innerText = "";
if (!validationObject[key]) {
document.getElementById(key).style.borderColor = "red";
} else {
document.getElementById(key).style.borderColor = "green";
}
});
});
// event handlers
complaintForm.addEventListener('submit', (e) => {
e.preventDefault();
if (!isValid(validateForm())) {
messageBox.innerText = "Please, fill out the required fields correctly before submitting.";
Object.keys(validateForm()).forEach(function (key) {
if (!validateForm()[key]) {
document.getElementById(key).style.borderColor = "red";
} else {
document.getElementById(key).style.borderColor = "green";
}
});
} else {
messageBox.innerText = "";
alert("Form successfully submitted.");
//clearForm();
}
});
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
Challenge Information:
Build a Customer Complaint Form - Build a Customer Complaint Form