Tell us what’s happening:
My code fails to pass the final 2 tests (30 + 31).
According to logs I put, it should.
I’m having trouble figuring out what’s not working. Seems like everything should be working.
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
const form = document.querySelector("#form");
const formFullName = form.querySelector("#full-name");
const formEmail = form.querySelector("#email");
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const formOrder = form.querySelector("#order-no");
const orderRegex = /^2024\d{6,6}$/; // a sequence of ten numbers starting with 2024.
const formProductCode = form.querySelector("#product-code");
const productCodeRegex = /^..\d\d-.\d\d\d-..\d$/;
const formQuantity = form.querySelector("#quantity");
const complaintsGroup = document.querySelector('#complaints-group');
const complaintDescriptionContainer = document.querySelector('#complaint-description-container');
const complaintDescription = document.querySelector('#complaint-description');
const solutionsGroup = document.querySelector('#solutions-group');
const solutionDescriptionContainer = document.querySelector('#solution-description-container');
const solutionDescription = document.querySelector('#solution-description');
const validateForm = () => {
const formData = {
'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
};
// console.log('validating form...');
// console.log(`formFullName.value: ${formFullName.value}`);
formData['full-name'] = formFullName.value != ''; // #full-name is not empty.
// console.log(formEmail.value); // #email is a valid email address format.
formData['email'] = emailRegex.test(formEmail.value);
// console.log(formOrder.value); // #order-no is a sequence of ten numbers starting with 2024.
formData['order-no'] = orderRegex.test(formOrder.value);
// console.log(formProductCode.value);
// #product-code follows the pattern XX##-X###-XX#, where X represents either a lowercase letter or an uppercase letter and # represents a number.
formData['product-code'] = productCodeRegex.test(formProductCode.value);
// console.log(Number.parseInt(formQuantity.value));
formData['quantity'] = Number.parseInt(formQuantity.value) > 0;
// at least one checkbox is checked
// #complaint-description contains at least twenty characters if the Other checkbox is checked.
// 13. When at least one checkbox from #complaints-group is checked, validateForm()["complaints-group"] should be true.
// 14. When none of the checkboxes from #complaints-group is checked, validateForm()["complaints-group"] should be false.
if (document.querySelectorAll('input[name="complaint"]:checked').length > 0) {
if (document.querySelector('#other-complaint').checked && complaintDescription.value.length > 20) {
formData['complaints-group'] = true;
formData['complaint-description'] = true;
} else if (!document.querySelector('#other-complaint').checked) {
formData['complaints-group'] = true;
formData['complaint-description'] = true;
}
}
// at least one radio button is selected
// 'other' radio button is selected and #solution-description has more than 20 characters
// console.log(`solutions values: ${document.querySelectorAll('input[name="solutions"]')}`);
if (document.querySelectorAll('input[name="solutions"]:checked').length > 0) {
if (document.querySelector('#other-solution').checked && solutionDescription.value.length > 20) {
formData['solutions-group'] = true;
formData['solution-description'] = true;
} else if (!document.querySelector('#other-solution').checked) {
formData['solutions-group'] = true;
formData['solution-description'] = true;
}
}
// console.log(formData);
return formData;
}
// 30 + 31 - Your isValid function should take the validateForm() as its argument and:
// return true when all the form fields have been filled correctly.
// return false when not all the form fields have been filled correctly.
const isValid = (callback) => {
return Object.values(callback()).every(value => value === true);
}
// 3. When the form is submitted, you should prevent its default behavior and log "form submitted" to the console.
form.addEventListener("submit", (e) => {
e.preventDefault();
console.log("form submitted");
// console.log(isValid(validateForm));
isValid(validateForm);
// submit the form if all fields are valid
// if (isValid(validateForm)) {
// form.submit();
// }
});
// 4. When a change event is triggered on #full-name, you should set its border color to green if it contains a valid value, and red otherwise.
formFullName.addEventListener("change", (e) => {
if (validateForm()['full-name']) {
formFullName.style.borderColor = "green";
} else {
formFullName.style.borderColor = "red";
}
});
// 5. When a change event is triggered on #email, you should set its border color to green if it contains a valid value, and red otherwise.
formEmail.addEventListener("change", (e) => {
if (validateForm()['email']) {
formEmail.style.borderColor = "green";
} else {
formEmail.style.borderColor = "red";
}
});
// 6. When a change event is triggered on #order-no, you should set its border color to green if it contains a valid value, and red otherwise.
formOrder.addEventListener("change", (e) => {
if (validateForm()['order-no']) {
formOrder.style.borderColor = "green";
} else {
formOrder.style.borderColor = "red";
}
});
// 10. When a change event is triggered on #product-code, you should set its border color to green if it contains a valid value, and red otherwise.
formProductCode.addEventListener("change", (e) => {
if (validateForm()['product-code']) {
formProductCode.style.borderColor = "green";
} else {
formProductCode.style.borderColor = "red";
}
});
// 12. When a change event is triggered on #quantity, you should set its border color to green if it contains a valid value, and red otherwise.
formQuantity.addEventListener("change", (e) => {
if (validateForm()['quantity']) {
formQuantity.style.borderColor = "green";
} else {
formQuantity.style.borderColor = "red";
}
});
// 15. Once one checkbox from #complaints-group is checked, you should set #complaints-group's border color to green.
complaintsGroup.addEventListener("change", (e) => {
if (validateForm()['complaints-group']) {
complaintsGroup.style.borderColor = "green";
} else {
complaintsGroup.style.borderColor = "red";
}
});
// 19. When #other-complaint is checked and the value of #complaint-description is changed to a valid value, you should set its border color to green.
complaintDescriptionContainer.addEventListener("change", (e) => {
if (validateForm()['complaint-description']) {
e.target.style.borderColor = "green";
} else {
e.target.style.borderColor = "red";
}
});
// 23. Once a radio button from #solutions-group is checked, you should set #solutions-group's border color to green.
solutionsGroup.addEventListener("change", (e) => {
if (validateForm()['solutions-group']) {
solutionsGroup.style.borderColor = "green";
} else {
solutionsGroup.style.borderColor = "red";
}
});
// 27. When #other-solution is checked and the value of #solution-description is changed to a valid value, you should set its border color to green.
solutionDescriptionContainer.addEventListener("change", (e) => {
if (validateForm()['solution-description']) {
e.target.style.borderColor = "green";
} else {
e.target.style.borderColor = "red";
}
});
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36
Challenge Information:
Build a Customer Complaint Form - Build a Customer Complaint Form