Build a Customer Complaint Form - Build a Customer Complaint Form

JavaScript
1

Tell us what’s happening:

Cant pass step 30, please help… :melting_face:

Failed:30. Your isValid function should take the validateForm() as its argument and return true when all the form fields have been filled correctly.

/* file: script.js */
const nameInput = document.querySelector("#full-name");
const emailInput = document.querySelector('#email');
const orderInput = document.querySelector('#order-no');
const productInput = document.querySelector('#product-code');
const quantityInput = document.querySelector('#quantity');
const complaintInput = document.querySelector('#complaints-group');
const complaintDescriptionInput = document.querySelector('#complaint-description');
const solutionsGroupInput = document.querySelector('#solutions-group');
const solutionDescriptionInput = document.querySelector('#solution-description');
const form = document.getElementById("form");

let testObjectRegexes = {
    'full-name' : /^(?!\s*$).+/,
    'email' : /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
    'order-no': /^2024\d{6}$/,
    'product-code': /^[a-zA-Z]{2}\d{2}-[a-zA-Z]\d{3}-[a-zA-Z]{2}\d$/,
    'quantity': /^[1-9]\d*$/,
  };


const validateForm = () => {
  let testObject = {
    '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,
  };
  if(nameInput.value == ''){
    testObject['full-name'] = false;
  } else{
    testObject['full-name'] = true;
  }

  if(emailInput.value == ''){
    testObject['email'] = false;
  } else{
    if(testObjectRegexes['email'].test(emailInput.value)){
      testObject['email'] = true;
    }
  }

  if(orderInput.value == ''){
    testObject['order-no'] = false;
  } else{
    if(testObjectRegexes['order-no'].test(orderInput.value)){
      testObject['order-no'] = true;
    }
  }

  if(productInput.value == ''){
    testObject['product-code'] = false;
  } else{
    if(testObjectRegexes['product-code'].test(productInput.value)){
      testObject['product-code'] = true;
    }
  }

  if(quantityInput.value == ''){
    testObject['quantity'] = false;
  } else{
    if(testObjectRegexes['quantity'].test(quantityInput.value)){
      testObject['quantity'] = true;
    }
  }

  let flagCB = false;
  let descriptionFlagCB = false;
  const checkboxesComplaintInput = document.querySelectorAll('input[name="complaint"]');
  for(let i = 0; i < checkboxesComplaintInput.length; i++){
    if(checkboxesComplaintInput[i].value == 'other'){
      if(checkboxesComplaintInput[i].checked && complaintDescriptionInput.value.length >= 20){
        flagCB = true;
        descriptionFlagCB = true;
        break;
      }
    }
    if(checkboxesComplaintInput[i].checked){
      flagCB = true;
      break;
    }
  }
  testObject['complaint-description'] = descriptionFlagCB;
  testObject['complaints-group'] = flagCB;


  let flagRB = false;
  let descriptionFlagRB = false;
  const radioButtonSolutionsGroupInput = document.querySelectorAll('input[name="solutions"]');
  for(let i = 0; i < radioButtonSolutionsGroupInput.length; i++){
    if(radioButtonSolutionsGroupInput[i].value == 'other'){
      if(radioButtonSolutionsGroupInput[i].checked && solutionDescriptionInput.value.length >= 20){
        flagRB = true;
        descriptionFlagRB = true;
        break;
      }
    }
    if(radioButtonSolutionsGroupInput[i].checked){
      flagRB = true;
      break;
    }
  }
  testObject['solution-description'] = descriptionFlagRB;
  testObject['solutions-group'] = flagRB;

  return testObject;
};

function isValid(obj){
  let flag = true;
  for(let item in obj){
    const tempInput = document.querySelector(`#${item}`);
    if (!tempInput) continue; 
    if(obj[item] === true){
      tempInput.style.borderColor = "green";
    } else {
      tempInput.style.borderColor = "red";
      flag = false;
    }
  }
  return flag;
};

const result = validateForm();
const formIsValid = isValid(result);

nameInput.addEventListener('change', () => {
  isValid(validateForm());
});
emailInput.addEventListener('change', () => {
  isValid(validateForm());
});
orderInput.addEventListener('change', () => {
  isValid(validateForm());
});
productInput.addEventListener('change', () => {
  isValid(validateForm());
});
quantityInput.addEventListener('change', () => {
  isValid(validateForm());
});
complaintInput.addEventListener('change', () => {
  isValid(validateForm());
});
complaintDescriptionInput.addEventListener('change', () => {
  isValid(validateForm());
});
solutionsGroupInput.addEventListener('change', () => {
  isValid(validateForm());
});
solutionDescriptionInput.addEventListener('change', () => {
  isValid(validateForm());
});

form.addEventListener("submit", (e) => {
  if (isValid(validateForm())) {
    console.log(validateForm());
  } else {
    console.log(validateForm());
    return;
  }
})

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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

Can you explain how you think your code is meeting this requirement?