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
<!-- file: index.html -->
/* file: styles.css */
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