備忘録：HTML送信時における処理実行順

経緯

onclick, onsubmitの違いとHTML属性(論理属性)の判定順を正確に理解しておらず、
共通した実装に至るまで遠回りして沼ったのでメモ書き

HTMLソースコードの一例

<form onsubmit="return bbb()" action="">
    <input type="" required />
    <button type="submit" onclick="aaa()"/>
</form>

判定処理順

1. submitボタン押下
2. onclick判定
3. requiredなどinputタグに記載された処理
4. onsubmit判定
5. formタグのaction実行
6. action先の実行

考察

・論理属性によるエラー文・エラー処理
・jsでのエラーチェック
どちらを優先するか、どこまで共通実装されているかを判断基準に
onsubmit, onclickの使い分けにおけるコード実装とするのが良さそう

例：
required属性が設定されているが、アラートで文字を表示させたい時
onsubmitではなく、onclickで処理させる

<form id="myForm">
    <input type="" required>
    <button type="submit" onclick="validate()">
</form>
<script>
function validate() {
    const form = document.getElementById('myForm');
    if (!form.checkValidity()) {
        alert('入力項目が不足してます。');
    }
}
</script>