如何停止表单中包含无效字段的表单提交？

Question

我一直在使用这个Background colors on Luhn Algorithm - JavaScript 来帮助建立一个类似的网页。但是，与原始海报不同，如果任何字段中有任何无效输入，我希望代码不要提交。我仍然希望输入字段更改颜色（绿色表示有效或红色表示无效）。

我相信我可以使用混合模式来修复名称和电子邮件（对于名称 - “[A-Za-z!#$%&'*+-/=?^_`{|}~ ]+") 并使用电子邮件部分的电子邮件输入类型。这是对所有输入字段使用“必需”的补充。然而，我最麻烦的是卡片部分。目前，如果卡片字段为红色，我无法找到不允许提交表单的方法。例如使用原帖中的代码，我可以输入'1'，输入字段会变成红色，但我仍然可以提交表单。我假设这与下面的部分有关，但我不确定要更改/添加什么：

cardNumberInput.addEventListener("keyup", e => {
  const isCardValid = valid_credit_card(e.target.value);
  if (isCardValid) {
    cardNumberInput.style.backgroundColor = "green";
  } else {
    cardNumberInput.style.backgroundColor = "red";
  }
})

任何帮助将不胜感激，对于您可能需要的任何遗漏细节，我深表歉意，这是我在这里的第一个问题。

Answer 1

将isCardValid 设为全局并像这样在您的表单上添加submit 事件监听器

let isCardValid = false
const cardNumberInput = document.getElementById('your-input')
const cardForm = document.getElementById('your-form')

cardNumberInput.addEventListener("keyup", e => {
    isCardValid = valid_credit_card(e.target.value);
    if (isCardValid) {
        cardNumberInput.style.backgroundColor = "green";
    } else {
        cardNumberInput.style.backgroundColor = "red";
    }
})

cardForm.addEventListener('submit', e => {
    if(!isCardValid)
        e.preventDefault()
})

在isCardValid 为真之前不会提交表单，如果您想手动提交表单而不是默认的 HTML 提交行为，请执行此操作

yourForm.addEventListener(e => {
    // To prevent default submission always.
    e.preventDefault()

    if(!isCardValid) return

    // Do anything here...
})