Question

这是我关注的App.js部分：

errorMessage=(validator, input, value, e)=> {
  const valid=validator(value)
  if (value==="") {
    input.nextElementSibling.style.display="inherit"
    e.preventDefault()
  } else if (!valid && value!=="") {
    input.nextElementSibling.nextElementSibling.style.display="inherit"
    e.preventDefault()
  }
}

const checkedCheckboxes=Array.from(checkboxes).filter(checkbox=> checkbox.checked);

validateCheckboxes=(e)=> {
  const checked=checkedCheckboxes.length;
  if (!checked) {
    fieldSetActivity.nextElementSibling.style.display="block"
    e.preventDefault()
  }
}

creditOptionChecked=()=> {
  Array.from(paymentOptions).forEach(option=> {
    if (option.selected) {
      if (option.value==="Credit Card") {
        return true
      }
    }
  })
}


validateForm=(e)=> {
  Array.from(inputElements).forEach(element=> {
    let value=element.value;
    let input=element;
    if (input===name) {
      errorMessage(isValidName, input, value, e)
    } else if (element===email) {
      errorMessage(isValidEmail, input, value, e);
    } else if (element===creditNumber) {
      errorMessage(isValidCreditCard, input, value, e);
    } else if (element===zip) {
      errorMessage(isValidZipCode, input, value, e);
    } else if (element===cvv) {
      errorMessage(isValidCvv, input, value, e);
    } else if (element==fieldSetActivity) {
      validateCheckboxes(e)
    }
  });
}



form.addEventListener('submit', (e)=> {
  validateForm(e)
  console.log("hello")
})

这是我的JS小提琴，以获取更多信息：https://jsfiddle.net/apasric4/4xfL9utv/1/

当选择信用卡选项时，我只希望表单包含信用卡号输入，邮政编码和cvv。我创建了一个用于检查此问题的函数，称为 creditOptionChecked ，但是我很难确定如何以模块化方式在我的 validateForm 函数中实现此功能。 / p>

我仍然希望数组在元素上迭代并在每个元素上标定诸如ErrorMessage之类的函数，但是我如何引入条件来检查creditOptionChecked，而无需在单独的函数中实现。是否可以在 validateForm 函数中完成全部操作？

谢谢

**编辑

否，当我要使用的付款方式中的信用卡选项时，我只希望表单验证信用卡字段（数字，邮政编码，cvv）菜单被选中。

如何以表格形式为所选选项实施条件验证？

0 个答案: