my step 15 19 20 21 23 24 27 30 are not passing anyone can help thanks in advance
<!-- file: index.html -->
/* file: script.js */
/* file: styles.css */
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
Build a Customer Complaint Form - Build a Customer Complaint Form
Please post your code. Also, please talk about how you got stuck figuring out what was wrong in your code. Thanks
woah thats strange i did aded my coded dont know what went wrong
Focus on one thing at a time. Look at test 15 first.
Please share any errors or hints that you are getting.
Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
Hey there,
Please update the message to include your code. The code was too long to be automatically inserted by the help button.
When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
"I’m working on a form validation function, and while most of the tests are passing, a few are failing. Specifically, I’m having trouble with
Updating border colors correctly for #complaints-group, #complaint-description, #solutions-group, and #solution-description when they become valid or invalid.
Handling radio buttons properly for #solutions-group—the validation doesn’t seem to update the border color correctly when a radio button is selected.
Ensuring my isValid function correctly checks
const form = document.getElementById('form');
const fullName = document.getElementById("full-name");
const email = document.getElementById("email");
const orderNo = document.getElementById("order-no");
const productCode = document.getElementById("product-code");
const quantity = document.getElementById("quantity");
const complaintDescription = document.getElementById("complaint-description");
const solutionDescription = document.getElementById("solution-description");
const complaintsGroup = document.getElementById("complaints-group");
const solutionsGroup = document.getElementById("solutions-group");
const otherComplaint = document.getElementById("other-complaint");
const otherSolution = document.getElementById("other-solution");
form.addEventListener("submit", function (event) {
event.preventDefault();
const validationResults = validateForm();
console.log(validationResults);
console.log("Is Form Valid?", isValid(validationResults));
});
function validateForm() {
const fullNameValue = fullName.value.trim();
const emailValue = email.value.trim();
const orderNoValue = orderNo.value.trim();
const productCodeValue = productCode.value.trim();
const quantityValue = parseInt(quantity.value.trim(), 10);
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const orderNoPattern = /^2024\d{6}$/;
const productCodePattern = /^[A-Za-z]{2}\d{2}-[A-Za-z]\d{3}-[A-Za-z]{2}\d$/;
const complaintCheckboxes = document.querySelectorAll('input[name="complaint"]:checked');
const isComplaintSelected = complaintCheckboxes.length > 0;
const solutionRadios = document.querySelectorAll('input[name="solution"]:checked');
const isSolutionSelected = solutionRadios.length > 0;
const isOtherComplaintValid = !otherComplaint.checked || (otherComplaint.checked && complaintDescription.value.trim().length >= 20);
const isOtherSolutionValid = !otherSolution.checked || (otherSolution.checked && solutionDescription.value.trim().length >= 20);
return {
"full-name": fullNameValue !== "",
"email": emailPattern.test(emailValue),
"order-no": orderNoPattern.test(orderNoValue),
"product-code": productCodePattern.test(productCodeValue),
"quantity": !isNaN(quantityValue) && quantityValue > 0,
"complaints-group": isComplaintSelected,
"complaint-description": isOtherComplaintValid,
"solutions-group": isSolutionSelected,
"solution-description": isOtherSolutionValid,
};
}
function isValid(validationResults) {
return Object.values(validationResults).every(result => result === true);
}
function updateBorderColor(element, isValid) {
element.style.borderColor = isValid ? "green" : "red";
}
fullName.addEventListener("change", function () {
updateBorderColor(fullName, fullName.value.trim() !== "");
});
email.addEventListener("change", function () {
updateBorderColor(email, /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value.trim()));
});
orderNo.addEventListener("change", function () {
updateBorderColor(orderNo, /^2024\d{6}$/.test(orderNo.value.trim()));
});
productCode.addEventListener("change", function () {
updateBorderColor(productCode, /^[A-Za-z]{2}\d{2}-[A-Za-z]\d{3}-[A-Za-z]{2}\d$/.test(productCode.value.trim()));
});
quantity.addEventListener("change", function () {
const quantityValue = parseInt(quantity.value.trim(), 10);
updateBorderColor(quantity, !isNaN(quantityValue) && quantityValue > 0);
});
const complaintCheckboxes = document.querySelectorAll('#complaints-group input[type="checkbox"]');
function updateComplaintsGroupBorder() {
const isAnyChecked = [...complaintCheckboxes].some(checkbox => checkbox.checked);
complaintsGroup.style.border = "2px solid " + (isAnyChecked ? "green" : "red");
}
complaintCheckboxes.forEach(checkbox => {
checkbox.addEventListener("change", updateComplaintsGroupBorder);
});
updateComplaintsGroupBorder();
otherComplaint.addEventListener("change", function () {
updateBorderColor(complaintDescription, !otherComplaint.checked || complaintDescription.value.trim().length >= 20);
});
complaintDescription.addEventListener("input", function () {
if (otherComplaint.checked) {
updateBorderColor(complaintDescription, complaintDescription.value.trim().length >= 20);
} else {
complaintDescription.style.borderColor = "";
}
});
const solutionRadios = document.querySelectorAll('#solutions-group input[type="radio"]');
function updateSolutionsGroupBorder() {
const isAnyChecked = Array.from(solutionRadios).some(radio => radio.checked);
updateBorderColor(solutionsGroup, isAnyChecked);
}
solutionRadios.forEach(radio => {
radio.addEventListener("change", updateSolutionsGroupBorder);
});
otherSolution.addEventListener("change", function () {
updateBorderColor(solutionDescription, !otherSolution.checked || solutionDescription.value.trim().length >= 20);
});
solutionDescription.addEventListener("input", function () {
if (otherSolution.checked) {
updateBorderColor(solutionDescription, solutionDescription.value.trim().length >= 20);
} else {
solutionDescription.style.borderColor = "";
}
});
The test fires the change event on the fieldset element, not the checkboxes. Not sure why, other than it was easier to code. It doesn’t seem like expected behavior, and there is an open issue for it.
i have passed the other test execpt 15 16 and 23 24 still trying to to pass it any guide
It looks like this is a problem with the test and a fix is in in the works
I would skip over this for now and come back to it.
yeah i skiped it but its still showing the same error
There is still an open issue for this lab.
I meant skip over this whole lab and go on to the next section of the curriculum.