Tell us what’s happening:
I’m failing 26, 28, 30, and 31. When I run the code in VSCode, all borders turn red and green appropriately, and I console logged all the object properties and values and things are true/false when they’re supposed to be. I’ve console logged everything I can think of. Any guidance on where to look next will be gratefully received. (I started a new thread so I could include my code, I didn’t see a way to edit my prior post to do that.)
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" required>
</div>
<div>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" placeholder="example@domain.com" required>
</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[0-9]{6}" required>
</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" required>
</div>
<div>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" step="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"minlength="20"></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" minlength="20"></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 */
I didn’t edit styles.css at all.
/* file: script.js */
const fullNameInput = document.getElementById("full-name");
const emailInput = document.getElementById("email");
const orderNoInput = document.getElementById("order-no");
const productCodeInput = document.getElementById("product-code");
const quantityInput = document.getElementById("quantity");
const otherCheckbox = document.getElementById("other-complaint");
const validateForm = () => {
const complaintDescription = document.getElementById('complaint-description').value;
const complaintCheckboxes = document.querySelectorAll('input[name="complaint"]:checked');
const selectedSolution = document.querySelector('input[name="solutions"]:checked');
const solutionDescriptionInput = document.getElementById("solution-description");
const iaComplaintChecked = complaintCheckboxes.length > 0;
const isOtherSolutionSelected = selectedSolution && selectedSolution.value === "other";
const isSolutionDescValid = isOtherSolutionSelected ? solutionDescriptionInput.checkValidity() : true;
console.log("Complaint Description:", complaintDescription);
console.log("Checked Complaints Count:", complaintCheckboxes.length);
console.log("Selected Solution:", selectedSolution ? selectedSolution.value : "None");
console.log("Solution Description:", solutionDescriptionInput.value);
console.log("Solution-description:", isSolutionDescValid);
const validityChecks = {
"full-name": fullNameInput.checkValidity(),
"email": emailInput.checkValidity(),
"order-no": orderNoInput.checkValidity(),
"product-code": productCodeInput.checkValidity(),
"quantity": quantityInput.checkValidity(),
"complaints-group": iaComplaintChecked,
"complaint-checked": complaintCheckboxes.length > 0,
"complaint-description": !otherCheckbox.checked || complaintDescription.length >= 20,
"solutions-group": selectedSolution !== null,
"solution-description": isSolutionDescValid
}
console.log("Validity Checks:", validityChecks);
console.log("Complaint Checked:", validityChecks["complaint-checked"]);
console.log("Complaint Description Valid:", validityChecks["complaint-description"]);
console.log("Solutions Group Valid:", validityChecks["solutions-group"]);
console.log("Solution Description Valid:", validityChecks["solution-description"]);
return validityChecks;
};
function isValid(validateForm) {
const validationObject = validateForm();
return Object.values(validationObject).every(Boolean);
};
document.getElementById("form").addEventListener("change", (e) => {
const target = e.target;
let isInputValid = false;
let elementToBorder = target;
if (target.name === "complaint" || target.name === "solutions") {
// Select the parent fieldset
elementToBorder = target.closest("fieldset");
if (target.name === "complaint") {
isInputValid = document.querySelectorAll('input[name="complaint"]:checked').length > 0;
} else {
isInputValid = document.querySelector('input[name="solutions"]:checked') !== null;
}
} else {
// // 2. Standard input validation
isInputValid = target.checkValidity();
}
if (isInputValid) {
elementToBorder.style.borderColor = "green";
} else {
elementToBorder.style.borderColor = "red";
}
const results = validateForm();
if (isValid(validateForm)) {
document.getElementById("message-box").textContent = "Form is valid!";
} else {
document.getElementById("message-box").textContent = "Please correct the highlighted errors.";
}
});
document.addEventListener("DOMContentLoaded", () => {
const form = document.getElementById("form");
if (form) {
console.log("Form element found: ", form);
console.log("Before checking form existence");
if (form) {
console.log("Inside form check");
form.addEventListener("submit", (e) => {
console.log("Inside the submit event");
e.preventDefault();
console.log("Form submission prevented");
console.log("Submit button clicked");
console.log("Full Name:", fullNameInput.value);
console.log("Email:", emailInput.value);
console.log("Order No:", orderNoInput.value);
console.log("Product Code:", productCodeInput.value);
console.log("Quantity:", quantityInput.value);
// Get the validation results
results = validateForm();
console.log("Validation Results:", results);
// Final check to see if the whole form is valid
if (isValid(validateForm)) {
console.log("Form is valid");
// Inform the user of successful submission
document.getElementById("message-box").textContent = "Form submitted successfully!";
} else {
console.log("Form is invalid");
// Inform the user to correct errors
document.getElementById("message-box").textContent = "Please correct the highlighted errors.";
// Iterate through every key in the results object
for (const [key, isFieldValid] of Object.entries(results)) {
let elementToHighlight;
// Determine which DOM element corresponds to the key
if (key === "complaint-checked") {
const complaintGroup = document.getElementById("complaints-group");
complaintGroup.style.borderColor = isFieldValid ? "green" : "red";
} else if (key == "complaint-description") {
elementToHighlight = document.getElementById("complaint-description");
elementToHighlight.style.borderColor = isFieldValid ? "green" : "red";
} else if (key === "solutions-group") {
elementToHighlight = document.getElementById("solutions-group");
} else {
elementToHighlight = document.getElementById(key);
if (elementToHighlight) {
elementToHighlight.style.borderColor = isFieldValid ? "green" : "red";
}
}
}
}
});
} else {
console.error("Form element not found");
}
}});
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.2 Safari/605.1.15 Ddg/26.2
Challenge Information:
Build a Customer Complaint Form - Build a Customer Complaint Form