Tell us what’s happening:
Okay, my boarders flash the correct colors of Christmas on change events, so why is the tester saying its not? Its also saying that I’m not calling my isValid function when I hit submit, but I know other people have wrapped isValid in another function and not had this issue, so I’m assuming its not a matter of calling it directly with an event listener. I do call it when the submit button is hit through the function I have it wrapped in. Can I get some advice as to what I’m doing wrong here?
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" pattern="/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/">
</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######"
pattern="2024\d{6}">
</div>
<div>
<label for="product-code">Product Code:</label>
<input type="text" id="product-code" name="product-code" placeholder="XX##-X###-XX#" pattern="[a-zA-Z][a-zA-Z]\d\d-[a-zA-Z]\d\d\d-[a-zA-Z][a-zA-Z]\d">
</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 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 complaintDescr = document.getElementById("complaint-description");
const solutionDescr = document.getElementById("solution-description");
const submitBtn = document.getElementById("submit-btn");
const form = document.getElementById("form")
//parent fieldsets
const personalInfo = document.getElementById("personal-info");
const productInfo = document.getElementById("product-info");
const complaintGroup = document.getElementById("complaints-group");
const complaintContainer = document.getElementById("complaint-description-container");
const solutionGroup = document.getElementById("solutions-group");
const solutionContainer = document.getElementById("solution-description-container");
//Use .checked for boolean result
const damaged = document.getElementById("damaged-product");
const noncon = document.getElementById("nonconforming-product");
const delayed = document.getElementById("delayed-dispatch");
const complOther = document.getElementById("other-complaint");
const refund = document.getElementById("refund");
const exchange = document.getElementById("exchange");
const solutionOther = document.getElementById("other-solution");
const transitionObj = {
'full-name':fullName,
'email':email,
'order-no':orderNum,
'product-code':productCode,
'quantity':quantity,
'complaints-group': complaintGroup,
'complaint-description':complaintDescr,
'solutions-group': solutionGroup,
'solution-description':solutionDescr
}
function validateForm(){
let formObj = {
'full-name':false,
'email':false,
'order-no':false,
'product-code':false,
'quantity':false,
'complaints-group':false,
'complaint-description':true,
'solutions-group':false,
'solution-description':true
}
if(fullName.value !== null && fullName.value !== undefined && fullName.value.length >=1){
console.log(fullName.value.length)
console.log(fullName.value)
console.log(typeof fullName.value)
formObj["full-name"]=true
}
if(email.checkValidity() && email.value !== null && email.value !== undefined && email.value.length > 1){
formObj["email"] = email.checkValidity()
}
if(orderNum.checkValidity() && orderNum.value !== null && orderNum.value !== undefined && orderNum.value.length > 1 ){
formObj["order-no"] = orderNum.checkValidity()
}
if(productCode.checkValidity() && productCode.value !== null && productCode.value !== undefined && productCode.value.length > 1 ){
formObj["product-code"] = productCode.checkValidity()
}
if(quantity.value > 0 && /[1-9]+/gi.test(quantity.value) && !/[a-z]/gi.test(quantity.value)){
formObj["quantity"] = true
}
if(damaged.checked||noncon.checked||delayed.checked||complOther.checked){
formObj["complaints-group"] = true
}
if(!complOther.checked && complaintDescr.value.length > 20 || complOther.checked && complaintDescr.value.length < 20){
formObj["complaint-description"] = false
}
if(refund.checked||exchange.checked||solutionOther.checked){
formObj["solutions-group"] = true
}
if(!solutionOther.checked && solutionDescr.value.length > 20 || solutionOther.checked && solutionDescr.value.length < 20){
formObj["solution-description"] = false
}
return formObj
}
function isValid(obj){
if(Object.values(obj).every(item => item === true)){
return true
}
else{
return false
}
}
function changeThings(){
let obj = validateForm()
console.log(isValid(validateForm()))
if(isValid(validateForm())){
Object.keys(obj).forEach(key => {
let el = transitionObj[key]
el.style.borderColor = "green"
})
personalInfo.style.borderColor = "green";
productInfo.style.borderColor = "green"
}
else{
Object.keys(obj).forEach(key => {
let el = transitionObj[key]
if(obj[key]==true){
el.style.borderColor = "green"
}
else{
el.style.borderColor = "red"
}
})
if(obj["full-name"] && obj["email"]){
personalInfo.style.borderColor = "green"
}
else{
personalInfo.style.borderColor = "red"
}
if(obj["order-no"]&& obj["product-code"] && obj["quantity"]){
productInfo.style.borderColor = "green"
}
else{
productInfo.style.borderColor = "red"
}
if(obj["complaints-group"]){
complaintGroup.style.borderColor = "green"
}
else{
complaintGroup.style.borderColor = "red"
}
if(obj["complaint-description"]){
complaintContainer.style.borderColor = "green"
}
else{
complaintContainer.style.borderColor = "red"
}
if(obj["solutions-group"]){
solutionGroup.style.borderColor = "green"
}
else{
solutionGroup.style.borderColor = "red"
}
if(obj["solution-description"]){
solutionContainer.style.borderColor = "green"
}
else{
solutionContainer.style.borderColor = "red"
}
}
}
submitBtn.addEventListener("click", ()=>{
form.addEventListener("change", changeThings)
})
submitBtn.addEventListener("click", changeThings)
/* Patterns
email: "/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/"
order-no: "2024\d{6}"
product-code: "[a-zA-Z][a-zA-Z]\d\d-[a-zA-Z]\d\d\d-[a-zA-Z][a-zA-Z]\d"
*/
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:153.0) Gecko/20100101 Firefox/153.0
Challenge Information:
Build a Customer Complaint Form - Build a Customer Complaint Form