如何停止表格中无效字段的提交？

Question

我一直在Luhn算法-JavaScript上使用这种背景颜色来帮助构建类似的网页。然而，与原始海报不同，如果在任何字段中有任何无效的输入，我希望代码不要提交。我仍然希望输入字段改变颜色（绿色表示有效，红色表示无效）。

我相信我可以使用混合模式修复名称和电子邮件（对于名称-“[a-Za-z！#$%”

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

将isCardValidglobal并在表单上添加一个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为true之前，表单不会被提交。如果要手动提交表单而不是默认的HTML提交行为，请执行此操作

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

    if(!isCardValid) return

    // Do anything here...
})