Tell us what’s happening:
I can’t proceed from the step 9. it says, Failed: 9. validateForm()["product-code"] should be true when #product-code contains a valid value, and false otherwise.
here is the regex need to be followed:
"XX##-X###-XX#"
here is my js code:
const fullName = document.getElementById("full-name");
const email = document.getElementById("email");
const orderNumber = document.getElementById("order-no");
const productCode = document.getElementById("product-code");
// validate if email input follows the regex
const regexCheck = (value, type) => {
const emailRegex = /^[a-zA-Z0-9._+-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,6}$/;
const orderNumberRegex = /^2024\d{6}$/;
const productCodeRegex = /^XX\d{2}-X\d{3}-XX\d{1}$/;
switch (type) {
case "email":
return emailRegex.test(value)
case "order-no":
return orderNumberRegex.test(value);
case "product-code":
return productCodeRegex.test(value);
}
}
// main
const validateForm = () => {
return {
"full-name": isValid(fullName.value),
"email": regexCheck(email.value, "email"),
"order-no": regexCheck(orderNumber.value, "order-no"),
"product-code": regexCheck(productCode.value, "product-code"),
};
}
Your code so far
<!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>
<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"></span>
</div>
</form>
<script src="script.js"></script>
</body>
</html>
const submitBtn = document.getElementById("submit-btn");
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 complaintDescription = document.getElementById("complaint-description");
const solutionsGroup = document.getElementById("solutions-group");
const solutionDescription = document.getElementById("solution-description");
// check if value is present
const isValid = (value) => {
const trimmedVal = value.trim();
if (trimmedVal) {
return true;
} else {
return false;
}
}
// validate if email input follows the regex
const regexCheck = (value, type) => {
const emailRegex = /^[a-zA-Z0-9._+-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,6}$/;
const orderNumberRegex = /^2024\d{6}$/;
const productCodeRegex = /^XX\d{2}-X\d{3}-XX\d{1}$/;
switch (type) {
case "email":
return emailRegex.test(value)
case "order-no":
return orderNumberRegex.test(value);
case "product-code":
return productCodeRegex.test(value);
}
}
// main
const validateForm = () => {
return {
"full-name": isValid(fullName.value),
"email": regexCheck(email.value, "email"),
"order-no": regexCheck(orderNumber.value, "order-no"),
"product-code": regexCheck(productCode.value, "product-code"),
};
}
console.log(validateForm());
// listeners
fullName.addEventListener("change", () => {
if (isValid(fullName.value)) {
fullName.style.borderColor = "green";
} else {
fullName.style.borderColor = "red";
}
})
email.addEventListener("change", () => {
if (isValid(email.value)) {
email.style.borderColor = "green";
} else {
email.style.borderColor = "red";
}
})
orderNumber.addEventListener("change", () => {
if (regexCheck(orderNumber.value, "order-no")) {
orderNumber.style.borderColor = "green";
} else {
orderNumber.style.borderColor = "red";
}
})
* {
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;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0
Challenge Information:
Build a Customer Complaint Form - Build a Customer Complaint Form
