如果未填寫必填字段，如何防止提交表單上的函數調用？

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>