Question

我有一个带有必需输入的表单，它实际上看到一个空字段并显示消息，但是它从“提交”按钮调用了函数

<form action="">
    <input required id="1" type="text">
    <button type="submit" onclick="calculate()">Calculate</button>
</form>

Answer 1

无论单击什么按钮，onclick侦听器都将运行。

您希望函数仅在开始提交表单时才运行，因此请将submit侦听器附加到表单：

<form action="" onsubmit="calculate()">
    <input required id="1" type="text">
    <button type="submit">Calculate</button>
</form>

const calculate = (e) => {
  console.log('calculating');
}

<form action="" onsubmit="calculate()">
    <input required id="1" type="text">
    <button type="submit">Calculate</button>
</form>

如果可能的话，最好使用Javascript而非内联HTML属性正确地附加事件侦听器：

document.querySelector('form').addEventListener('submit', calculate);

const calculate = (e) => {
  e.preventDefault();
  console.log('calculating');
};
document.querySelector('form').addEventListener('submit', calculate);

<form action="">
    <input required id="1" type="text">
    <button type="submit">Calculate</button>
</form>

如果未填写必填字段，如何防止在提交表单上调用函数？

1 个答案: