Build a Customer Complaint Form - Build a Customer Complaint Form

JavaScript
1

Tell us what’s happening:

I keep failing the last test plswhat am doing wrong this is " You should call isValid when you try to submit the form"

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
function validateForm() {
  const form = document.getElementById("form");
  const fullName = document.getElementById("full-name");
  const emailAddress = 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");

  let validationResult = {};

  //full-name validity
  const fullNameValidity = fullName.value.trim() === "" ? false : true;
  validationResult["full-name"] = fullNameValidity;
  fullName.addEventListener("change", () => {
    fullName.style.borderColor = fullName.value.trim() === "" ? "red" : "green";
})

  //email validity
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const emailValidity = emailRegex.test(emailAddress.value);
  validationResult["email"] =  emailValidity;
  emailAddress.addEventListener("change", () => {
    emailAddress.style.borderColor = emailRegex.test(emailAddress.value) ? "green" : "red"
  })

//order-no Validity
  const numberRegex = /^2024\d{6}$/;
  const orderNoValidity = numberRegex.test(orderNumber.value);
  validationResult["order-no"] = orderNoValidity;
  orderNumber.addEventListener("change", () => {
    orderNumber.style.borderColor = numberRegex.test(orderNumber.value) ? "green" : "red";
  })

  //product code validity

  const productRegex = /^[a-zA-Z]{2}\d{2}-[a-zA-Z]\d{3}-[a-zA-Z]{2}\d$/;

  const productCodeValidity = productRegex.test(productCode.value);
  validationResult["product-code"] = productCodeValidity;

  productCode.addEventListener("change", () => {
    productCode.style.borderColor = productRegex.test(productCode.value) ? "green" : "red";
  })

  //quantity validation
  const quantityValidation = quantity.value <= 0 ? false : true;
  validationResult["quantity"] = quantityValidation;
  quantity.addEventListener("change", () => {
    quantity.style.borderColor = quantity.value <= 0 ? "red" : "green";
  })

  //complaints-group validation
  const complaintsChecked = document.querySelectorAll("#complaints-group input[type='checkbox']:checked").length
  const complaintGroupValidation = complaintsChecked === 0 ? false : true;
  validationResult["complaints-group"] = complaintGroupValidation;
  complaintsGroup.addEventListener("change", () => {
    const currentChecked = document.querySelectorAll("#complaints-group input[type='checkbox']:checked").length;
    complaintsGroup.style.borderColor = currentChecked === 0 ? "red" : "green";
  })

  // other complaint validation
  const otherComplaints = document.getElementById("other-complaint");
  if (otherComplaints.checked) {
    if (complaintDescription.value.length >= 20) {
      validationResult["complaint-description"] = true;
    } else {
    validationResult["complaint-description"] = false;
  }
  } else {
    validationResult["complaint-description"] = true;
  }
  complaintDescription.addEventListener("change", () => {
    if (complaintDescription.value.length >= 20) {
      complaintDescription.style.borderColor = "green"
    } else {
      complaintDescription.style.borderColor = "red"
    }
  })

  //solution group validation
  const solutionsChecked = document.querySelectorAll("#solutions-group input[type='radio']:checked").length;
  const solutionsGroupValidation = solutionsChecked === 0 ? false : true;
  validationResult["solutions-group"] = solutionsGroupValidation;

  solutionsGroup.addEventListener("change", () => {
    const currentSolutionChecked = document.querySelectorAll("#solutions-group input[type='radio']:checked").length;
    solutionsGroup.style.borderColor = currentSolutionChecked === 0 ? "red" : "green"
})

  //othersolution validation
  const otherSolutions = document.getElementById("other-solution").checked;
  if (otherSolutions) {
    if (solutionDescription.value.length >= 20) {
      validationResult["solution-description"] = true;
    } else {
      validationResult["solution-description"] = false;
    }
  } else {
    validationResult["solution-description"] = true;
  }
  solutionDescription.addEventListener("change", () => {
    if (solutionDescription.value.length >= 20) {
      solutionDescription.style.borderColor = "green"
    } else {
      solutionDescription.style.borderColor = "red"
    }
  })
  return validationResult;
}

//validateForm()
function isValid (validateForm) {
  for (const key in validateForm) {
    if (validateForm[key] === false) {
      return false
    } 
  }
  return true
}

const submitBtn = document.getElementById("submit-btn");

submitBtn.addEventListener("click", (event) => {
  event.preventDefault()
  isValid(validateForm())
})

// console.log(submitBtn.type)

Your browser information:

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

Challenge Information:

Build a Customer Complaint Form - Build a Customer Complaint Form

2

I think the reason why the test is failing is because you’re not properly calling isValid()

You are calling isValid() but not doing anything with the result. isValid() checks if the form is valid but you are not using the result to determine what happens next.