Build a Customer Complaint Form - Build a Customer Complaint Form

JavaScript
1

Tell us what’s happening:

i am not able to clear test 19,20. the same approach seems to be working in the previous tests. what am i missing?

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>

        <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>



js
/* file: script.js */
```const form = document.getElementById("form");
const fullName = document.getElementById("full-name");
const email = document.getElementById("email");
const orderNo = document.getElementById("order-no");
const productCode = document.getElementById("product-code");
const quantity = document.getElementById("quantity");
const complaintsGroup = document.getElementById("complaints-group");
const otherComplaint = document.getElementById("other-complaint");
const complaintDescription = document.getElementById("complaint-description");
const solutionsGroup = document.getElementById("solutions-group");
const solutionDescription = document.getElementById("solution-description");

function validateForm() {
  const result = {
    "full-name": fullName.value.trim() !== "",
    email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value),
    "order-no": /^2024\d{6}$/.test(orderNo.value),
    "product-code": /^[a-zA-Z]{2}\d{2}-[a-zA-Z]\d{3}-[a-zA-Z]{2}\d$/.test(productCode.value),
    quantity: /^[1-9]\d*$/.test(quantity.value),
    "complaints-group": document.querySelectorAll("#complaints-group input[type='checkbox']:checked").length > 0,
    "complaint-description": !otherComplaint.checked || complaintDescription.value.trim().length >= 20,
    "solutions-group": document.querySelectorAll("#solutions-group input[type='radio']:checked").length > 0,
    "solution-description": !document.getElementById("other-solution").checked || solutionDescription.value.trim().length >= 20
  };
  return result;
}

function isValid(validationResult) {
  return Object.values(validationResult).every(Boolean);
}

fullName.addEventListener("change", () => {
  const result = validateForm();
  fullName.style.borderColor = result["full-name"] ? "green" : "red";
});

email.addEventListener("change", () => {
  const result = validateForm();
  email.style.borderColor = result["email"] ? "green" : "red";
});

orderNo.addEventListener("change", () => {
  const result = validateForm();
  orderNo.style.borderColor = result["order-no"] ? "green" : "red";
});

productCode.addEventListener("change", () => {
  const result = validateForm();
  productCode.style.borderColor = result["product-code"] ? "green" : "red";
});

quantity.addEventListener("change", () => {
  const result = validateForm();
  quantity.style.borderColor = result["quantity"] ? "green" : "red";
});

const complaintCheckboxes = complaintsGroup.querySelectorAll("input[type='checkbox']");

complaintCheckboxes.forEach(checkbox => {
  checkbox.addEventListener("change", () => {
    const validationResult = validateForm();
    complaintsGroup.style.borderColor = validationResult["complaints-group"] ? "green" : "red";
  });
});

complaintDescription.addEventListener("input", () => {
  const shouldValidate = otherComplaint.checked;
  const value = complaintDescription.value.trim();

  if (shouldValidate) {
    complaintDescription.style.borderColor = value.length >= 20 ? "green" : "red";
  } else {
    complaintDescription.style.borderColor = "";
  }
});

otherComplaint.addEventListener("change", () => {
  const value = complaintDescription.value.trim();
  if (otherComplaint.checked) {
    complaintDescription.style.borderColor = value.length >= 20 ? "green" : "red";
  } else {
    complaintDescription.style.borderColor = "";
  }
});

const solutionRadios = document.querySelectorAll("#solutions-group input[type='radio']");

solutionRadios.forEach(radio => {
  radio.addEventListener("change", () => {
    const result = validateForm();
    solutionsGroup.style.borderColor = result["solutions-group"] ? "green" : "red";
  });
});

// Stuck at this part....

complaintDescription.addEventListener("input", () => {
  const value = complaintDescription.value.trim();
  if (otherComplaint.checked) {
    complaintDescription.style.borderColor = value.length >= 20 ? "green" : "red";
  } else {
    complaintDescription.style.borderColor = ""; 
  }
});

otherComplaint.addEventListener("change", () => {
  const value = complaintDescription.value.trim();
  if (otherComplaint.checked) {
    complaintDescription.style.borderColor = value.length >= 20 ? "green" : "red";
  } else {
    complaintDescription.style.borderColor = "";
  }
});```

/* 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;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Challenge Information:

Build a Customer Complaint Form - Build a Customer Complaint Form

2

I think the test might only be firing "change" events.

For some reason I thought that had been changed, but I guess not.

3

Thanks. so one word was ruining it all for me. but the question is how can change event validate whether the user has 20 or more characters? please clarify. thanks again though

4

Not sure exactly what you mean, but the test fires the "change" event manually using new Event().

But you are right that just writing in the textarea will not trigger that event, you have to “blur” the element for the event to trigger, i.e. click outside it after writing.

I have opened an issue for it. Like I said, I thought it had been fixed already.