Tell us what’s happening:
Story 3: my #email element changes its border color as it should be like every other elements but it is still not able to clear the test case.
Story 33: my isValid() returns false if anyone of the field is invalid but it unable to clear the test case
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 required 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"
pattern="^\S+@\S+\.\S+$"
>
</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}">
</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"
>
</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 */
/* file: script.js */
function validateForm() {
const result = {
"full-name" : true,
"email" : true,
"order-no" : true,
"product-code" : true,
"quantity" : true,
"complaints-group" : false,
"complaint-description" : true,
"solutions-group" : false,
"solution-description" : true
};
for (const prop in result) {
const element = document.getElementById(prop);
if (prop === "complaints-group") break;
else {
if (!element.checkValidity()) result[prop] = false;
}
}
const complaints = document.querySelectorAll("input[type='checkbox']");
const otherComplaint = document.getElementById("other-complaint");
const solutions = document.querySelectorAll("input[type='radio']");
const otherSol = document.getElementById("other-solution");
for (const checkbox of complaints) {
if (checkbox.checked) {
result["complaints-group"] = true;
break;
}
}
if (otherComplaint.checked) {
const complaintDec = document.getElementById("complaint-description");
result["complaint-description"] = complaintDec.value.length >= 20;
}
for (const radio of solutions) {
if (radio.checked) {
result["solutions-group"] = true;
break;
}
}
if (otherSol.checked) {
const solutionDec = document.getElementById("solution-description");
result["solution-description"] = solutionDec.value.length >= 20;
}
return result;
}
function isValid(obj) {
for (const prop in obj) if (!obj[prop]) return false;
return true;
}
function changeBorderColor(obj) {
for (const prop in obj) {
const element = document.getElementById(prop);
element.addEventListener("change", () => {
obj = validateForm();
element.style.borderColor = obj[prop] ? "green" : "red";
});
}
}
changeBorderColor(validateForm());
const form = document.getElementById("form");
form.addEventListener("submit", (e) => {
e.preventDefault();
isValid(validateForm());
console.log(validateForm(), isValid(validateForm()));
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:151.0) Gecko/20100101 Firefox/151.0
Challenge Information:
Build a Customer Complaint Form - Build a Customer Complaint Form
