Tell us what’s happening:
Hey there!
I have passed most of the tests but this one “You should call isValid when you try to submit the form.” has failed even when I have called the function.
Please guide me where I have made the mistake. Thank you
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 */
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
#form {
max-width: 70%;
margin: auto;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 10px;
}
input {
border-color: rgb(118, 118, 118);
}
#personal-info input, #product-info input {
width: 100%;
margin-bottom: 10px;
}
fieldset {
margin-bottom: 10px;
border-radius: 5px;
border-color: rgb(118, 118, 118);
}
textarea {
width: 100%;
border-color: rgb(118, 118, 118);
}
#btn-container {
display: flex;
justify-content: space-between;
align-items: center;
}
#submit-btn, #clear-btn {
margin: 10px 15px 0;
}
/* file: script.js */
const nameInput = 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 complaintDescriptionTextarea = document.getElementById("complaint-description");
const complaintsGroupCheckBox = document.getElementById("complaints-group");
const solutionsGroupRadioButton = document.getElementById("solutions-group");
const solutionDescriptionTextArea = document.getElementById("solution-description");
const complaintsGroup = document.querySelectorAll(`[name="complaint"]`);
const solutionsGroup = document.querySelectorAll(`[name="solutions"]`);
const inputElements = document.querySelectorAll("input, textarea");
const submitBtn = document.getElementById("submit-btn");
function validateForm (){
const nameRegex = /[a-z]+/i;
const emailRegex = /^\w+@[a-z]+\.com$/i;
const orderNoRegex = /^2024\d{6}$/;
const productCodeRegex = /^[a-zA-Z]{2}\d{2}-[a-zA-Z]\d{3}-[a-zA-Z]{2}\d$/ig;
const checkedOthersButton = complaintsGroup[complaintsGroup.length - 1].checked;
const selectedOthersRadioButton = solutionsGroup[solutionsGroup.length - 1].checked;
const isValidName = nameRegex.test(nameInput.value);
const isValidEmail = emailRegex.test(emailInput.value);
const isValidOrderNo = orderNoRegex.test(orderNoInput.value);
const isValidProductCode = productCodeRegex.test(productCodeInput.value);
const isValidQuantity = Number.isInteger(Number(quantityInput.value)) && Number(quantityInput.value) > 0;
const isValidComplaintsGroup = checkedBox(complaintsGroup);
let isValidcomplaintDescription = true;
if(checkedOthersButton){
isValidcomplaintDescription = complaintDescriptionTextarea.value.trim().length >= 20;
}
const isValidSolutionsGroup = selectedRadioButton(solutionsGroup);
let isValidSolutionDescription = true;
if(selectedOthersRadioButton) {
;
isValidSolutionDescription = solutionDescriptionTextArea.value.trim().length >= 20;
}
let object = {
"full-name": isValidName,
email: isValidEmail,
"order-no": isValidOrderNo,
"product-code": isValidProductCode,
quantity: isValidQuantity,
"complaints-group": isValidComplaintsGroup,
"complaint-description": isValidcomplaintDescription,
"solutions-group": isValidSolutionsGroup,
"solution-description": isValidSolutionDescription
}
return object;
}
function checkedBox (obj) {
let checked = false;
obj.forEach(complaint => {
if (complaint.checked) {
checked = true;
}
});
return checked;
}
function selectedRadioButton (arr) {
let select = false;
arr.forEach(button => {
if(button.checked) {
select = true;
}
});
return select;
}
function isValid(isobject) {
return Object.values(isobject).every(field => field === true);
}
function colorHighlights () {
const inputElements = document.querySelectorAll("input");
let isobject = validateForm();
inputElements.forEach(input => {
if (isobject[input.id]){
input.style.borderColor = 'green';
}else {
input.style.borderColor = 'red';
}
});
if (isobject["complaints-group"]){
complaintsGroupCheckBox.style.borderColor = 'green';
}else {
complaintsGroupCheckBox.style.borderColor = 'red';
}
if(isobject["solutions-group"]) {
solutionsGroupRadioButton.style.borderColor = 'green';
}else {
solutionsGroupRadioButton.style.borderColor = 'red';
}
if(isobject["complaint-description"]){
complaintDescriptionTextarea.style.borderColor = 'green';
}else{
complaintDescriptionTextarea.style.borderColor = 'red';
}
if(isobject["solution-description"]){
solutionDescriptionTextArea.style.borderColor = 'green';
}else{
solutionDescriptionTextArea.style.borderColor = 'red';
}
}
function submitform(e) {
e.preventDefault()
const isobject = validateForm();
const isValidForm = isValid(isobject);
if (!isValidForm) {
colorHighlights ();
}else {
console.log('form submited');
}
}
inputElements.forEach(inputElement => {
inputElement.addEventListener("change", () => {
colorHighlights ()
});
});
submitBtn.addEventListener("click", submitform);
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36
Challenge Information:
Build a Customer Complaint Form - Build a Customer Complaint Form
