Build a Customer Complaint Form - Build a Customer Complaint Form

JavaScript
1

Tell us what’s happening:

Hey, I’m stuck and I’m not sure why it’s not passing. Can you help me figure out why this test isn’t passing?

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

Your code so far

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


/* file: styles.css */


/* file: script.js */
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.getElementById('complaints-group');

const complaintDescription = document.getElementById('complaint-description');

const solutionsGroup = document.getElementById('solutions-group');

const solutionDescription = document.getElementById('solution-description');

const form = document.getElementById('form');

const inputs = form.querySelectorAll('input');

const otherComplaint = document.getElementById('other-complaint');

const otherSolution = document.getElementById('other-solution');

function validateForm() {

  const validatingObject = {};

    validatingObject['full-name'] = fullName.value.trim() !== '';
  
  validatingObject['email'] = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value);

  validatingObject['order-no'] = /^(2024)\d{6}/.test(orderNo.value);

  validatingObject['product-code'] = /^[a-zA-Z]{2}\d{2}-[a-zA-Z]\d{3}-[a-zA-Z]{2}\d$/.test(productCode.value);

  validatingObject['quantity'] = quantity.value > 0;

  validatingObject['complaints-group'] = complaintsGroup.querySelectorAll('input[type="checkbox"]:checked').length > 0;


  validatingObject['complaint-description'] = otherComplaint.checked && complaintDescription.value.trim().length >= 20;

  validatingObject['solutions-group'] = solutionsGroup.querySelectorAll('input[type="radio"]:checked').length > 0;

  validatingObject['solution-description'] = otherSolution.checked && solutionDescription.value.trim().length >= 20;
  
  return validatingObject;

}

function isValid(validateForm) {
  for (const key in validateForm) {
    if (validateForm.hasOwnProperty(key)) {
      if (!validateForm[key]) {
        return false;
      }
    }
  }
  return true;
}

isValid(validateForm())

form.addEventListener('change', (e) => {
 
const target = e.target;
 const fieldName = target.id;
 const isValidField = validateForm()[fieldName];

 if(target.tagName === 'INPUT'){
     if(target.type !== 'checkbox' && target.type !== 'radio'){
      target.style.borderColor = isValidField ? 'green' : 'red';
    
   }
 }
  complaintDescription.style.borderColor = isValidField ? 'green' : 'red';
      solutionDescription.style.borderColor = isValidField ? 'green' : 'red';

  complaintsGroup.querySelectorAll('input').forEach(input => {
  input.addEventListener('change', () => {
    const isChecked = Array.from(complaintsGroup.querySelectorAll('input')).some(checkbox => checkbox.checked);
    complaintsGroup.style.borderColor = isChecked ? 'green' : 'red';
  });
});

 solutionsGroup.querySelectorAll('input').forEach(input => {
  input.addEventListener('change', () => {
    const isChecked = Array.from(solutionsGroup.querySelectorAll('input')).some(checkbox => checkbox.checked);
    solutionsGroup.style.borderColor = isChecked ? 'green' : 'red';
  });
});

});

form.addEventListener('submit', (e) =>{
  e.preventDefault();
  if(isValid(validateForm())){
    form.submit();
  }

})

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

What you tried any tests?

Use console.log() to log to console all of the arguments that are being sent to your function. This way you can see what input is causing a problem

3

i did i still dont know where the problem is ! my validateForm() function is working but isValid function is not

4

Here’s what I found:

Screenshot 2025-05-02 113927
Screenshot 2025-05-02 113927820×397 51.5 KB

{ 'full-name': true,
  email: true,
  'order-no': true,
  'product-code': true,
  quantity: true,
  'complaints-group': true,
  'complaint-description': false,
  'solutions-group': true,
  'solution-description': false }
Form Elements:
  Full Name: test
  Email: test@test.com
  Order No: 2024123456
  Product Code: XX55-g123-gf5
  Quantity: 1
  Complaint Group: undefined
  Complaint Description: 
  Other Complaint: false
  Solution Group: undefined
  Solution Description: 
  Other Solution: false

I’ve filled out everything correctly, but the descriptions in the object are false (and the borders are red)

1 Like