# Build a Customer Complaint Form - Build a Customer Complaint Form

**URL:** <https://forum.freecodecamp.org/t/build-a-customer-complaint-form-build-a-customer-complaint-form/791736>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [June 18, 2026, 8:57pm UTC](https://forum.freecodecamp.org/t/build-a-customer-complaint-form-build-a-customer-complaint-form/791736 "2026-06-18T20:57:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tirsote](https://avatars.discourse-cdn.com/v4/letter/t/b782af/32.png) [@tirsote](https://forum.freecodecamp.org/u/tirsote)\
**Post date:** [June 18, 2026, 8:57pm UTC](https://forum.freecodecamp.org/t/build-a-customer-complaint-form-build-a-customer-complaint-form/791736/1 "2026-06-18T20:57:07Z")

</div>

### Tell us what’s happening:

Hello,

It seems the program does what it’s supposed to, but it gives me errors in 9, 10, 22, 23, 32, and 34.

### Your code so far

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

```

```css
/* file: styles.css */

```

```js
const nameInput=document.getElementById('full-name');
const mail=document.getElementById('email')
const orderProducto=document.getElementById('order-no')

const codigoProducto=document.getElementById('product-code')
const cantidad=document.getElementById('quantity')
const other=document.getElementById('other-complaint')
const contenedorComplaints=document.getElementById('complaints-group')
const descripcionComplaints=document.getElementById('complaint-description')
const grupoSolucion=document.getElementById('solutions-group')
const descripcionSolution=document.getElementById('solution-description')
const otherSolution=document.getElementById('other-solution')
const btnSubmit=document.getElementById("submit-btn")
const formulario=document.getElementById("form")

function isValidName(){
    let isValid= nameInput.value!='';
    if (isValid==true){nameInput.style.borderColor="green"}else{nameInput.style.borderColor="red"}
        return isValid;

    }
function isValidEmail(){
  let patron=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  let isValid= patron.test(mail.value);
  if (isValid==true){mail.style.borderColor="green"}else{mail.style.borderColor="red"}
  return isValid;
  }
function isValidOrder(){
  let patron=/^2024\d{6}$/;
  let isValid=patron.test(orderProducto.value);
  if (isValid==true){orderProducto.style.borderColor="green"}else{orderProducto.style.borderColor="red"};
  return isValid}
function isValidCodigo(){
  let patron=/^[A-Za-z]{2}\d{2}[A-Za-z]\d{3}[A-Za-z]{2}\d$/;
  let isValid= patron.test(codigoProducto.value);
  if (isValid==true){
    codigoProducto.style.borderColor="green" ;return true}else{
      codigoProducto.style.borderColor="red"
      return false}
  }
function isValidCantidad(){ 
  let isValid= Number.isInteger(Number(cantidad.value)) && cantidad.value>0;
  if (isValid==true){cantidad.style.borderColor="green"}else{cantidad.style.borderColor="red"};
  return isValid}

function isValidCheck(){
    const seleccionados = document.querySelectorAll('input[name="complaint"]:checked');
    let isValid= seleccionados.length>0;
    if (isValid==true){contenedorComplaints.style.borderColor="green"}else{contenedorComplaints.style.borderColor="red"}
    return isValid;
  
  }
function isValidDescription(){
    let isValid= descripcionComplaints.value.length>=20;
    if (other.checked==true){
    if (isValid==true){descripcionComplaints.style.borderColor="green";return true}else{descripcionComplaints.style.borderColor="red";return false}}
    else{descripcionComplaints.style.borderColor="black";return true};
    }
function isValidSolution(){
    let isValid= descripcionSolution.value.length>=20;
    if (otherSolution.checked==true){
    if (isValid==true){descripcionSolution.style.borderColor="green";return true}else{descripcionSolution.style.borderColor="red";return false}}
    else{descripcionSolution.style.borderColor="black";return true};
    
    }    
function isValidRadio(){
    const seleccionados = document.querySelectorAll('input[name="solutions"]:checked');
    isValidSolution();
    let isValid= seleccionados.length>0;
    if (isValid==true){grupoSolucion.style.borderColor="green";
    return true}else{grupoSolucion.style.borderColor="red";
    return false};
    
    }
function validateForm(){
  const objeto ={ 
    'full-name' : isValidName(),
    'email' : isValidEmail(),
    'order-no':isValidOrder(),
    'product-code' :isValidCodigo() ,
    'quantity': isValidCantidad(),
    'complaints-group' :isValidCheck(),
    'complaint-description' : isValidDescription(),
    'solution-group' : isValidRadio(),
    'solution-description':isValidSolution()
    }
    return objeto;
}
function isValid(objeto){
  const vector=Object.values(objeto);
  return vector.every(valor => valor==true)
}

descripcionSolution.addEventListener("input",isValidSolution)
grupoSolucion.addEventListener("change",isValidRadio)
descripcionComplaints.addEventListener("input",isValidDescription)
contenedorComplaints.addEventListener("change",isValidCheck)
other.addEventListener("change",isValidDescription)
cantidad.addEventListener("change",isValidCantidad)
codigoProducto.addEventListener("change",isValidCodigo)
orderProducto.addEventListener("change",isValidOrder)
mail.addEventListener("change",isValidEmail)
nameInput.addEventListener("change",isValidName)
btnSubmit.addEventListener("click",(event) =>{
event.preventDefault();
console.log(validateForm())

if (isValid(validateForm())){formulario.submit()}})

```

### Your browser information:

User Agent is: `Mozilla/5.0 (X11; Linux x86_64; rv:151.0) Gecko/20100101 Firefox/151.0`

### Challenge Information:

Build a Customer Complaint Form - Build a Customer Complaint Form

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/javascript-v9/lab-customer-complaint-form/build-a-customer-complaint-form)**
>
> Learn to Code — For Free

GitHub Link: [freeCodeCamp/curriculum/challenges/english/blocks/lab-customer-complaint-form/67279fe50237291f80eed8b8.md at main · freeCodeCamp/freeCodeCamp · GitHub](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/blocks/lab-customer-complaint-form/67279fe50237291f80eed8b8.md)

---

<div class="post-metadata">

**Author:** ![Teller](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/teller/32/412338_2.png) [@Teller](https://forum.freecodecamp.org/u/Teller)\
**Post date:** [June 18, 2026, 9:16pm UTC](https://forum.freecodecamp.org/t/build-a-customer-complaint-form-build-a-customer-complaint-form/791736/2 "2026-06-18T21:16:18Z")

</div>

Hi @tirsote

To help you debug, start by adding the following console log at the bottom of the editor.

```auto
console.log(validateForm()["product-code"])

```

Happy coding

---

<div class="post-metadata">

**Author:** ![santimagris](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/santimagris/32/380221_2.png) [@santimagris](https://forum.freecodecamp.org/u/santimagris)\
**Post date:** [June 18, 2026, 9:50pm UTC](https://forum.freecodecamp.org/t/build-a-customer-complaint-form-build-a-customer-complaint-form/791736/3 "2026-06-18T21:50:53Z")

</div>

Hi @tirsote — adding to @Teller’s debugging tip, which is the right way to inspect each field.

Try logging the whole object Teller showed, but look closely at the **keys** you’re using inside `validateForm()` versus the IDs you grabbed at the top of your file.

Compare these two lines from your own code:

- At the top: `document.getElementById('solutions-group')`

- Inside `validateForm()`: `'solution-group' : isValidRadio()`

Notice anything different between `solutions-group` and `solution-group`? The tests check against the real element ID, so if the key doesn’t match exactly, that field’s validation won’t register the way you expect. Fixing that key alone should clear several of those failing tests.

Once that’s sorted, re-run and see which numbers are left — happy to look again if any remain!

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [July 16, 2026, 9:51pm UTC](https://forum.freecodecamp.org/t/build-a-customer-complaint-form-build-a-customer-complaint-form/791736/4 "2026-07-16T21:51:30Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.