Build a Customer Complaint Form - Build a Customer Complaint Form

JavaScript
1

Tell us what’s happening:

Hi, I can’t get to pass tests 19, 27 and 32. The textareas became red even if the value is true. And , 32, how should I call isValid differently of how I’m doing?
Any help is much appreciated, thanks

Your code so far

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


/* file: script.js */
const form = document.querySelector('#form');
const fullName = 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 complaintsGroup = document.querySelector("#complaints-group");
const checkboxes = document.querySelectorAll('[type="checkbox"]');
const otherComplaint = document.getElementById("other-complaint");
const complaintDescription = document.getElementById("complaint-description");
const solutionsGroup = document.querySelector("#solutions-group");
const radio = document.querySelectorAll('[type="radio"]');
const otherSolution = document.getElementById('other-solution');
const solutionDescription = document.getElementById("solution-description");
const submitBtn = document.getElementById("submit-btn");

const description = document.querySelectorAll('textarea');


let validateObject = {};

function validateForm() {
  validateObject = {
    "full-name": fullName.value !== "",
    'email': /^([a-zA-Z0-9._-]+)@([a-zA-Z0-9.-]+)\.([a-zA-Z]{2,})$/.test(
      email.value
    ),
    "order-no": /^2024\d{6}$/.test(orderNo.value),
    "product-code": /^[a-zA-Z]{2}\d{2}-[a-zA-Z]\d{3}-[a-zA-Z]{2}\d$/.test(
      productCode.value
    ),
    'quantity': (quantity.value > 0),

    'complaints-group': ([...checkboxes].some(checkbox => checkbox.checked)),
    'complaint-description': (otherComplaint.checked === false || otherComplaint.checked && (/.{20}/).test(complaintDescription.value)),
    'solutions-group': (Array.from(radio).some(radio => radio.checked)),
    'solution-description': (otherSolution.checked === false || otherSolution.checked && (/.{20}/).test(solutionDescription.value)),
  };
  console.log(validateObject)
  return validateObject;
};

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

submitBtn.addEventListener("click", () => {
  const object = validateForm();
  isValid(object);
  console.log(isValid(object))
});

form.addEventListener('change', (event) => {
  const object = validateForm();
  const target = event.target.name;

  object[target]
    ? event.target.style.borderColor = 'green'
    : event.target.style.borderColor = 'red'
});

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    const someChecked = Array.from(checkboxes).some(cb => cb.checked);

    complaintsGroup.style.borderColor = someChecked ? 'green' : 'red';
  });
});

radio.forEach(rad => {
  rad.addEventListener('change', () => {
    const check = Array.from(radio).some(rad => rad.checked);
    solutionsGroup.style.borderColor = check
      ? 'green'
      : 'red'
  })
});



/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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

Could you explain which part of code is responsible for changing the color of border?

1 Like
3

Yes, is this part. It is supposed to change the color of all the input elements and the textarea elements

4

If border of the textareas are always changed to 'red', what does it say about the object[target] for these cases?

5

Yes, that they are always false, and I think I figured out why. The name attribute values of the textareas are different from the id attrubute values. So can I just change the name attribute on the html file? Or we are only allowed to work on the js file for these challenges.

6

I don’t think there’s anything specifically forbidding changing html or css. Changing name in the html is one way, what are other options?

1 Like
7

Of course, changing the event.target.name to event.target.id !! Thanks
Do you have any suggestion for the challenge 32
why this is not passing

1 Like
8

No worries I figured it out the challenge 32 as well. Thank you