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

Question

I have form with required inputs, it actually sees empty field and shows message, but it calls function from submit button

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

Answer 1

An onclick listener will run whenever the button is clicked, no matter what.

You want the function to run only when the form starts to be submitted, so attach a submit listener to the form instead:

<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>

If at all possible, it would be much better to attach the event listener properly using Javascript instead of an inline HTML attribute:

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>