Question

这是我的App.js

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

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

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



validateForm=()=> {
  if (!validateCheckboxes()) {
    return false 
  }
  return true
}

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


form.addEventListener('submit', validateForm);

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

我研究了类似于该问题的答案，并注释掉了代码，我意识到布尔值没有到达父 validateForm 函数。

因此，我决定测试一个功能，即 validateCheckboxes 函数，并在表单提交处理程序中实现可能的工作解决方案。但是，没有，尽管validate checkboxes函数返回false，该表单仍会提交。

为什么会这样？

Answer 1

编辑：

您的代码中有两件事需要解决

如果onSubmit=return fun()属性中有<form>，则返回true / false。由于您使用的是监听器，因此您需要通过验证功能执行event.preventDefault()
您的checkedCheckboxes是const，这意味着当选中/取消选中复选框时，不会动态填充它。将其移至您的复选框验证方法中，并使用let

有了这些更改，您的验证位将如下所示：

validateCheckboxes=()=> {
// 2. Local variable
let checkedCheckboxes=Array.from(checkboxes).filter(checkbox=> checkbox.checked);
  const checked=checkedCheckboxes.length;
  if (!checked) {
    fieldSetActivity.nextElementSibling.style.display="block"
    return false;
  }
  return true;
}

validateForm=()=> {
  if (!validateCheckboxes()) {
  // 1. preventDefault instead of 'false'
     event.preventDefault();
  }
  return;
}

JSFiddle：https://jsfiddle.net/raghav_s/3e6s5tw8/

旧答案：

提供通用的“如何验证表单”

您需要在提交表单之前调用JS验证为此，请使用表单的onSubmit属性

<form action="index.html" method="post" onSubmit="return validateForm()">

JSFiddle：https://jsfiddle.net/raghav_s/3e6s5tw8/

您还可以使用表单事件侦听器并按照此MDN article

中的说明调用event.preventDefault()来完成此操作

从该页面引用示例：

JS：

function logSubmit(event) {
  log.textContent = `Form Submitted! Time stamp: ${event.timeStamp}`;
  event.preventDefault();
}

const form = document.getElementById('form');
const log = document.getElementById('log');
form.addEventListener('submit', logSubmit);

HTML：

<form id="form">
  <label>Test field: <input type="text"></label>
  <br><br>
  <button type="submit">Submit form</button>
</form>
<p id="log"></p>

尽管返回了错误的Vanilla Javascript，

1 个答案: