Build a customer complaint form

JavaScript
1

Tell us what’s happening:

I have done the build a customer complaint form. At the first glance, all my code and my logic in JS worked, but when I applied it to FCC tester, my code met all requirement except:

  1. validateForm()["full-name"] should be false when #full-name is empty, and true otherwise.
  2. When a change event is triggered on #full-name, you should set its border color to green if it contains a valid value, and red otherwise.
  3. Your isValid function should take the validateForm() as its argument and return false when not all the form fields have been filled correctly.

I used ChatGPT and Copilot to find the mistakes, but I still failed.

Maybe my code are messy to find the bugs.

Please help to fix my code.

Thank you so much.

Your code so far:

//script.js

//retrieve fieldset elements
const form = document.getElementById("form");
const personalInfo = document.getElementById("personal-info");
const productInfo = document.getElementById("product-info");
const complaints = document.getElementById("complaints-group");
const solutions = document.getElementById("solutions-group");
const message = document.getElementById("message-box");

//retrieve input elements
const name = 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 checkboxs = Array.from(document.querySelectorAll('input[type="checkbox"]'));
const complaintDescription = document.getElementById("complaint-description");
const radios = Array.from(document.querySelectorAll('input[type="radio"]'));
const solutionDescription = document.getElementById("solution-description");
const otherComplaint = document.getElementById("other-complaint");
const otherSolution = document.getElementById("other-solution");

function validateForm() {
    const validationObj = {};
    validationObj["full-name"] = name.value.trim() !== "";
    validationObj["email"] = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value);
    validationObj["order-no"] = /2024\d{6}/.test(orderNo.value);
    validationObj["product-code"] = /^\w{2}\d{2}-\w\d{3}-\w{2}\d$/.test(productCode.value);
    validationObj["quantity"] = /^[1-9]\d*$/.test(quantity.value) ? true : false ;
    validationObj["complaints-group"] = checkboxs.some((checkbox) => checkbox.checked);
    validationObj["complaint-description"] = complaintDescription.value.length < 20 && otherComplaint.checked ? false : true ;
    validationObj["solutions-group"] = radios.some((radio) => radio.checked);
    validationObj["solution-description"] = solutionDescription.value.length < 20 && otherSolution.checked ? false : true ;

    return validationObj;
}

function isValid(obj) {
    return Object.values(obj).every(value => value === true);
}


//attach change event listener to all properties in validationObj
Object.entries(validateForm()).forEach(([key, value]) => {
    document.getElementById(`${key}`).addEventListener("change", (e) => {
        if (!validateForm()[key]) {
                document.getElementById(`${key}`).style.borderColor = "red";
            } else {
                document.getElementById(`${key}`).style.borderColor = "green";
            }
    })
})


form.addEventListener("submit", (e) => {
    const obj = validateForm();

    if (!isValid(obj)) {
        for (const key in obj) {
            if (!obj[key]) {
                document.getElementById(`${key}`).style.borderColor = "red";
            } else {
                document.getElementById(`${key}`).style.borderColor = "rgb(118, 118, 118)";
            }
        }
        message.textContent = "Please, fill out the required fields correctly before submitting.";
        e.preventDefault();
    } else {
        alert("Successfully Submitted");
    }
});

project information:

2

hello @twilight1 welcome to the forum!

try changing this variable name. Sometimes using name as the name of your variable makes the code act weird.

3

OMG. It worked. I’m so surprised. Just one small fix.
Thank you so much sir.:blush: