创建客户投诉表格-如何通过最后一个

Chinese 中文 JavaScript
1

我尝试了很久，仍然无法通过最后一个要求：在提交表格时调用inVaild

const form=document.querySelector("#form");
const inputFullName=document.querySelector("#full-name");
const inputEmail=document.querySelector("#email");
const inputOrderno=document.querySelector("#order-no");
const inputProductcode=document.querySelector("#product-code");
const inputQuantity=document.querySelector("#quantity");
const complaintsGroup=document.querySelectorAll('#complaints-group input[type="checkbox"]');
const complaintDescription=document.querySelector("#complaint-description");
const solutionsGroup=document.querySelectorAll('#solutions-group input[type="radio"]');
const solutionDes=document.querySelector("#solution-description");
const submitbtn=document.querySelector("#submit-btn");

const arr=[inputFullName,inputEmail,inputOrderno,inputProductcode,inputQuantity,complaintDescription,solutionDes];

const arr1=['full-name','email','order-no','product-code','quantity','complaint-description','solution-description'];

function validateForm(){
  let obj={};
  obj['full-name']=inputFullName.value.trim()!=='';

  obj['email']=/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(inputEmail.value);
  
  obj['order-no']=/^2024\d{6}/.test(inputOrderno.value);
  
  obj['product-code']=/^[a-z]{2}\d{2}-[a-z]\d{3}-[a-z]{2}\d$/i.test(inputProductcode.value);

  obj['quantity']=Number.isInteger(inputQuantity.valueAsNumber)&&inputQuantity.valueAsNumber>0;
  
  obj['complaints-group']=Array.from(complaintsGroup).some(checkbox=>checkbox.checked)
  
  if(obj['complaints-group']){
    const other=document.querySelector("#other-complaint");
    if(other&&other.checked){
      obj['complaint-description']=complaintDescription.value.length>=20;
    }
    else{
      obj['complaint-description']=true;
    }
  }

  obj['solutions-group']=Array.from(solutionsGroup).some(checkbox=>checkbox.checked);

  if(obj['solutions-group']){
    const other=document.querySelector("#other-solution");
    if(other&&other.checked){
      obj['solution-description']=solutionDes.value.length>=20;
    }
    else{
      obj['solution-description']=true;
    }
  }

  return obj;
}

function isValid(validateResult){

  for(let key in validateResult){
    if(!validateResult[key])return false;
  }
  return true;
}

arr.forEach((changevent,index)=>{
  changevent.addEventListener("change",()=>{
    const validateResult=validateForm();

    changevent.style.borderColor=validateResult[arr1[index]]?'green':'red';
  })
})

Array.from(complaintsGroup).forEach(changevent=>{
  changevent.addEventListener("change",()=>{
    const fieldset=document.querySelector("#complaints-group");
    const validateResult=validateForm();

    if(fieldset){
      fieldset.style.borderColor=validateResult['complaints-group']?'green':'red';
    }
  })
})

Array.from(solutionsGroup).forEach(changevent=>{
  changevent.addEventListener("change",()=>{
    const validateResult=validateForm();
    const fieldset=document.querySelector("#solutions-group");

    if(fieldset){
      fieldset.style.borderColor=validateResult['solutions-group']?'green':'red';
    }
  })
})

submitbtn.addEventListener("click",(e)=>{
  e.preventDefault();

  const validateResult=validateForm();

  if(isValid(validateForm())){
    form.submit();
  }
  else{
    const error=Object.keys(validateResult).filter(key=>!validateResult[key])

    arr.forEach((arm,index)=>{
      if(error.includes(arr1[index])){
        arm.style.borderColor='red'
      }
    })
  }
})