Build a Customer Complaint Form - Build a Customer Complaint Form

JavaScript
1

Tell us what’s happening:

I ran into an issue with test 3.
Although I set the object key as specified, the test did not pass.

  1. validateForm()["full-name"] should be false when #full-name is empty, and true otherwise.

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" class="hide">
            <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);
}

.hide {
  display: none;
}
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 */
let formObj = {
  "full-name": false,
  email: false,
  "order-no": false,
  "product-code": false,
  quantity: false,
  "complaints-group": false,
  "complaint-description": false,
  "solutions-group": false,
  "solution-description": false,
};

const validateForm = () => {
  return formObj;
};

const fullnameInput = document.getElementById("full-name");
const fullnameRegexj = /[^\s]/g;

fullnameInput.addEventListener("change", () => {
  const inputValue = fullnameInput.value;

  if (inputValue.match(fullnameRegexj) === null) {
    validateForm()["full-name"] = false;
    console.log(validateForm()["full-name"]);
  } else {
    validateForm()["full-name"] = true;
    console.log(validateForm()["full-name"]);
  }
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:146.0) Gecko/20100101 Firefox/146.0

Challenge Information:

Build a Customer Complaint Form - Build a Customer Complaint Form

2

I admit, I don´t know DOM manipulation that much, I learning it currently, but since you got no response for hours, I want to help you as much as I can and I tried to understand the concept and I think you should make your code more practical by keeping the .addEventListener() simple and using the validation process only inside the validateForm() function.

For better understanding it, please review the Emoji Reactor workshop.
You probably did that a while ago, but I think it summarise how to use event listeners very effectively.

1 Like
3

I recommend a review of this lecture: Understanding Form Validation - What Are Some Ways to Validate Forms Using JavaScript? | Learn | freeCodeCamp.org particularly in reference to the checkValidity() function.

1 Like
4

I had a look at similar posts on the forum, but I wasn’t really sure where to start, as this lab felt a bit overwhelming at first.
I’ll give your suggestion a go.
Happy coding, and Happy New Year!

1 Like
5

I noticed there are quite a few different ways other campers dealt with this lab.
I didn’t copy and paste their solutions — I wanted to understand the lab properly and solve it on my own.
I’ll follow your guidance.
Happy coding, and Happy New Year!

1 Like