时间戳

首页 > 解决方案 > 尽管返回了错误的 Vanilla Javascript，但表单仍在提交

javascript - 尽管返回了错误的 Vanilla Javascript，但表单仍在提交

问题描述

这是我的 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函数，并在我的表单提交处理程序中实现一个可能的工作解决方案。但是不，尽管验证复选框函数返回 false，但表单仍会提交。

为什么会这样？

标签： javascriptvalidation

解决方案

编辑：

您的代码中有两件事需要修复

  1. 如果您的属性onSubmit=return fun()中有一个，则返回 true/false 有效。<form>由于您使用的是侦听器，因此您需要event.preventDefault()从验证功能
  2. 你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/

您也可以使用表单事件侦听器并event.preventDefault()按照此MDN 文章中的说明进行调用

引用该页面中的示例：

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>

推荐阅读