Tell us what’s happening:
I keep getting this error for all my input checks:
“validateForm()[“full-name”] should be false when #full-name is empty, and true otherwise.”
Not sure what the issue is as the code works fine?
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">
</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>
<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 */
const fullName = document.getElementById('full-name');
const email = document.getElementById('email');
const orderNumber = document.getElementById('order-no');
const productCode = document.getElementById('product-code');
const quantity = document.getElementById('quantity');
const complaintsGroup = document.getElementById('complaints-group');
const solutionsGroup = document.getElementById('solutions-group');
const complaintDescription = document.getElementById('complaint-description');
const solutionDescription = document.getElementById('solution-description');
const form = document.getElementById('form')
function isValidEmail(value) {
console.log(value)
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(value);
}
function isNotEmptyString(value){
console.log(value)
return typeof value === 'string' && value.trim() !== '';
}
function isOrderNoRightSequence(value){
const numStr = String(value);
console.log(numStr)
return numStr.startsWith("2024") && numStr.length === 10
}
function isProductCodeCheck(value){
console.log(value)
return /^[a-zA-Z]{2}\d{2}-[a-zA-Z]\d{3}-[a-zA-Z]{2}\d$/.test(value);
}
function isQuantityPositive(value){
console.log(value)
return /^[1-9][0-9]*$/.test(value);
}
function isAtLeastOneChecked(fieldsetId) {
console.log(fieldsetId)
return document.querySelectorAll(`#${fieldsetId} input[type="checkbox"]:checked`).length > 0;
}
function otherComplaintCheck(value){
console.log(value)
const otherIsChecked = document.querySelector(`#other-complaint:checked`)
if(!otherIsChecked) return true; //skip complaints if other isn't checked
return otherIsChecked && value.length > 20;
}
function isRadioSelected(name) {
console.log(name)
return document.querySelector(`input[name="${name}"]:checked`) !== null;
}
function isOtherSolutionChecked(value) {
console.log(value)
const otherSolutionChecked = document.querySelector(`#other-solution:checked`);
if (!otherSolutionChecked) return true; // skip description check if other isn't selected
return otherSolutionChecked && value.length > 20;
}
function validateForm(){
return {
fullname: isNotEmptyString(fullName.value),
email: isValidEmail(email.value),
orderno: isOrderNoRightSequence(orderNumber.value),
productcode: isProductCodeCheck(productCode.value),
quantity: isQuantityPositive(quantity.value),
complaintsgroup: isAtLeastOneChecked('complaints-group'),
complaintdescription: otherComplaintCheck(complaintDescription.value),
solutionsgroup: isRadioSelected("solutions"),
solutiondescription: isOtherSolutionChecked(solutionDescription.value),
}
}
function isValid(){
return Object.values(validateForm()).every(result => result === true)
}
function validateInputFields(){
fullName.addEventListener('change', () => {
fullName.style.borderColor = isNotEmptyString(fullName.value) ? 'green' : 'red';
});
email.addEventListener('change', () => {
email.style.borderColor = isValidEmail(email.value) ? 'green' : 'red';
});
orderNumber.addEventListener('change', () => {
orderNumber.style.borderColor = isOrderNoRightSequence(orderNumber.value) ? 'green' : 'red';
});
productCode.addEventListener('change', () => {
productCode.style.borderColor = isProductCodeCheck(productCode.value) ? 'green' : 'red';
});
quantity.addEventListener('change', () => {
quantity.style.borderColor = isQuantityPositive(quantity.value) ? 'green' : 'red';
});
complaintsGroup.addEventListener('change', () => {
complaintsGroup.style.borderColor = isAtLeastOneChecked("complaints-group") ? 'green' : 'red';
});
complaintDescription.addEventListener('change', () => {
complaintDescription.style.borderColor = otherComplaintCheck(complaintDescription.value) ? 'green' : 'red';
});
solutionsGroup.addEventListener('change', () => {
solutionsGroup.style.borderColor = isRadioSelected("solutions") ? 'green' : 'red';
});
solutionDescription.addEventListener('change', () => {
solutionDescription.style.borderColor = isOtherSolutionChecked(solutionDescription.value) ? 'green' : 'red';
});
}
validateInputFields();
form.addEventListener("submit", (e) => {
e.preventDefault();
if (isValid()) {
document.getElementById('message-box').textContent = 'Form submitted!';
}else {
document.getElementById('message-box').textContent = 'Error with form validation!';
}
});
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/18.6 Safari/605.1.15
Challenge Information:
Build a Customer Complaint Form - Build a Customer Complaint Form