HTML5 OKボタン押下時に、submitのバリデーションチェックをした後にonclickの関数を呼ぶ

HTML5

ポイント

・form onSubmitを使うこと

 

<form onSubmit="function();">
<input class="input" type="text" required>
<button type="submit">Ok</button>
</form>

 

NGな例

イベントリスナで規定のsubmitをキャンセルしてonclickで呼びたい処理を書く

HTML要素.addEventListener('click', (e) => {
　// 規定の動作をキャンセル
　e.preventDefault();
　// イベント発生時に行う処理
}

これだとsubmitの入力バリデーションチェック機能も動かなくなってしまう。