Build a Customer Complaint Form - Build a Customer Complaint Form

JavaScript
1

Tell us what’s happening:

hi, please help, i can’t pass 30. i already checked but the isvalid does return true when all the fields is filled correctly. thank you

Your code so far

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


/* file: styles.css */


/* file: script.js */
const validation = {
    "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
  }

function regexPlaceholder(placeholder) {
  const wildcards = {
    '#': '\\d',
    'X': '[a-zA-Z]',
    '@': '[a-zA-Z0-0]'
  };
  let pattern = placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  pattern = pattern.replace(/[#X@]/g, (match) => wildcards[match]);
  console.log(pattern)
  return new RegExp(`^${pattern}$`, "i");
}

const formComponent = {}
for(const prop in validation) {
  formComponent[prop] = document.querySelector(`#${prop}`)
  formComponent[prop].addEventListener("change", () => {
    if(validateForm()[prop]) {
      formComponent[prop].style.borderColor = "green";
    }
    else {
      formComponent[prop].style.borderColor = "red";
    }
  })
}

function validateForm() {
  for(const prop in validation) {
    if(formComponent[prop].type === "email") {
      validation[prop] = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formComponent[prop].value);
    }
    else if(formComponent[prop].type === "text") {
      if(formComponent[prop].value !== "") {
        if(formComponent[prop].placeholder == "") {
          validation[prop] = true;
        }
        else {
          validation[prop] = regexPlaceholder(formComponent[prop].placeholder).test(formComponent[prop].value);
        }       
      }
      else validation[prop] = false;
    }
    else if(formComponent[prop].type === "textarea") {
      if(formComponent[prop].value.length >= 20) {
        validation[prop] = true;
      }
      else validation[prop] = false;
    }
    else if(formComponent[prop].type === "number") {
      validation[prop] = parseInt(formComponent[prop].value) > 0;
    }
    else if(formComponent[prop].type === "fieldset") {
      if(formComponent[prop].querySelector('input[type="checkbox"]:checked') ||formComponent[prop].querySelector('input[type="radio"]:checked')) {
        validation[prop] = true;
      }
      else validation[prop] = false;
    }
  }
  console.log(validation)
  return validation;
}

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

document.querySelector("#form").addEventListener("submit", (event) => {
  event.preventDefault();
  console.log(isValid(validateForm()));
})

Your browser information:

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

Challenge Information:

Build a Customer Complaint Form - Build a Customer Complaint Form

2

Welcome to the forum @s1conan!

Why is complaint-description and solution-description false when an option is checked that is not “Other”?

Happy coding!

3

yeayy thank you, i missed that point :sweat_smile: