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

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>