【javascript】フォームで入力が無かったらエラーメッセージを出す方法

送信ボタンが押されて入力がなければエラーメッセージを出したかった時の備忘録

送信時入力が無かったら任意のエラーメッセージを出す方法

フォームに未入力があったらclass="error"を表示
フォームの入力が完了したら「お問い合わせありがとう」ページに飛ぶことを想定して作成

<style>
  input.invalid{
    background-color: #ffe1e1;
  }
  .error{
    color: #ff7676;
    font-size: .8em;
    display: none;
  }
  .error.invalid{
    display: block;
  }
</style>

<form action="/thanks" method="post">
  <ul>
  <li>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" required>
    <span class="error">入力がありません</span>
  </li>
  <li>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email" required>
    <span class="error">入力がありません</span>
  </li>
  <li>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message" required></textarea>
    <span class="error">入力がありません</span>
  </li>
  <li class="button">
    <button type="button" id="send">メッセージを送信</button>
  </li>
 </ul>
</form>

<!-- jQuery読み込み -->
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

<script>
jQuery(function($){
  $('#send').on("click", function() {
    $('form').find('.invalid').removeClass('invalid');// 初期化
    $('input[required]:invalid,textarea[required]:invalid').each(function(){// 項目が空だったらエラー表示をする
      $(this).addClass('invalid');
      $(this).next().addClass('invalid');
    });
    if($('.invalid').length == 0){// 未入力がない時
      $('form').submit();
      console.log('送信しました');
    }else{// 未入力がある時
      console.log('未入力があります');
    }
    return false;// submitの送信中止用
  });
});
</script>

やっていることとしては

入力が無かったら.invalidを付与し、
エラーメッセージを表示する
↓
全て入力された状態（.invalidがない）ならsubmit()で送信処理を行っている

途中submit()が上手く動作しなくて試行錯誤したんだけど、
どうにもclassやname属性に「submit」という名前を付けると上手くいかないみたい
謎、、、