Tell us what’s happening:
Cant pass test 30 and 32, tried to surf all over the forum, i am not going to lie, i even asked the AI, but nothing helped me with test 30 (31 passes). Someone, please, help me
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" required>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>
<div 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>
</div>
<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>
<div 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>
</div>
<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 */
const fullName = document.getElementById('full-name');
const email = document.getElementById('email');
const orderNum = document.getElementById('order-no');
const productCode = document.getElementById('product-code');
const quantity = document.getElementById('quantity');
const complaintsGroup = document.getElementById('complaints-group');
const complaintDesc = document.getElementById('complaint-description');
const solutionsGroup = document.getElementById('solutions-group');
const solutionDesc = document.getElementById('solution-description');
const submitBtn = document.getElementById('submit-btn');
const damagedProduct = document.getElementById('damaged-product');
const nonconformingProduct = document.getElementById('nonconforming-product');
const delayedDispatch = document.getElementById('delayed-dispatch');
const otherComplaint = document.getElementById('other-complaint');
const checkboxes = document.querySelectorAll('input[type="checkbox"]')
const refund = document.getElementById('refund');
const exchange = document.getElementById('exchange');
const otherSolution = document.getElementById('other-solution');
const radios = document.querySelectorAll('input[type="radio"]')
let valObj = {};
function validateForm(){
const fullNameValue = fullName.value;
const emailValue = email.value;
const orderNumValue = orderNum.value;
const productCodeValue = productCode.value;
const quantityValue = quantity.value;
const complaintDescValue = complaintDesc.value;
const solutionDescValue = solutionDesc.value;
function validateName(){
if(fullNameValue !== ""){
valObj['full-name'] = true
} else {
valObj['full-name'] = false;
}
}
function validateEmail(){
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if(emailPattern.test(emailValue)){
valObj['email'] = true;
} else {
valObj['email'] = false;
}
}
function validateOrderNumber(){
const orderNumPattern = /^2024[0-9]{6}$/;
if(orderNumPattern.test(orderNumValue)){
valObj['order-no'] = true;
} else {
valObj['order-no'] = false;
}
}
function validateProductCode(){
const codePattern = /^[a-zA-Z]{2}[0-9]{2}-[a-zA-Z][0-9]{3}-[a-zA-Z]{2}[0-9]{1}$/;
if(codePattern.test(productCodeValue)){
valObj['product-code'] = true;
} else {
valObj['product-code'] = false;
}
}
function validateQuantity(){
const num = Number(quantityValue);
if(num >= 1 && num === Math.floor(num)){
valObj['quantity'] = true;
} else {
valObj['quantity'] = false;
}
}
function validateOneCheckBox(){
const checkedOne = Array.from(checkboxes);
if(checkedOne.some(x => x.checked)){
valObj['complaints-group'] = true;
} else {
valObj['complaints-group'] = false;
}
}
function validateComplaintDesc(){
if(otherComplaint.checked && complaintDescValue.length >= 20){
valObj['complaint-description'] = true;
} else {
valObj['complaint-description'] = false;
}
}
function validateOneRadio(){
const checkOne = Array.from(radios);
if(checkOne.some(x => x.checked)){
valObj['solutions-group'] = true;
} else {
valObj['solutions-group'] = false;
}
}
function validateRadioOther(){
if(otherSolution.checked && solutionDescValue.length >= 20){
valObj['solution-description'] = true;
} else {
valObj['solution-description'] = false;
}
}
validateName();
validateEmail();
validateOrderNumber();
validateProductCode();
validateQuantity();
validateOneCheckBox();
validateComplaintDesc();
validateOneRadio();
validateRadioOther();
return valObj
}
function isValid(valObj){
const allValid = Object.values(valObj).every(value => value === true);
if(allValid){
return true;
} else {
return false;
}
}
fullName.addEventListener('change', () => {
if(fullName.value !== ""){
fullName.style.borderColor = 'green';
} else {
fullName.style.borderColor = 'red';
}
});
email.addEventListener('change', () => {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if(emailPattern.test(email.value)){
email.style.borderColor = 'green';
} else {
email.style.borderColor = 'red';
}
});
orderNum.addEventListener('change', () => {
const orderNumPattern = /^2024[0-9]{6}$/;
if(orderNumPattern.test(orderNum.value)){
orderNum.style.borderColor = 'green';
} else {
orderNum.style.borderColor = 'red';
}
});
productCode.addEventListener('change', () => {
const codePattern = /^[a-zA-Z]{2}[0-9]{2}-[a-zA-Z][0-9]{3}-[a-zA-Z]{2}[0-9]{1}$/;
if(codePattern.test(productCode.value)){
productCode.style.borderColor = 'green';
} else {
productCode.style.borderColor = 'red';
}
});
quantity.addEventListener('change', () => {
const num = Number(quantity.value);
if(num >= 1 && num === Math.floor(num)){
quantity.style.borderColor = 'green';
} else {
quantity.style.borderColor = 'red';
}
});
complaintsGroup.addEventListener('change', () => {
const checkedOne = Array.from(checkboxes);
if(checkedOne.some(x => x.checked)){
complaintsGroup.style.borderColor = 'green';
} else {
complaintsGroup.style.borderColor = 'red';
}
});
complaintDesc.addEventListener('change', () => {
if(complaintDesc.value.length >= 20 && otherComplaint.checked){
complaintDesc.style.borderColor = 'green';
} else {
complaintDesc.style.borderColor = 'red';
}
});
solutionsGroup.addEventListener('change', () => {
const checkOne = Array.from(radios);
if(checkOne.some(x => x.checked)){
solutionsGroup.style.borderColor = 'green';
} else {
solutionsGroup.style.borderColor = 'red';
}
})
solutionDesc.addEventListener('change', () => {
if(otherSolution.checked && solutionDesc.value.length >= 20){
solutionDesc.style.borderColor = 'green';
} else {
solutionDesc.style.borderColor = 'red';
}
});
submitBtn.addEventListener('click', (e) => {
e.preventDefault();
const validationResults = validateForm();
if(!isValid(validationResults)){
alert('Please fill out all fields correctly before submitting.');
}
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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