【jQuery/JS】formのsubmit時に処理を入れるとHTML5のrequire属性が無視される問題について

jQueryでフォームのsubmit処理前に任意の処理を記述したい場合、以下のように書くのだが、このコードには一つ問題がある。。

$(function(){
  $('#submit-button').click(function(){
    // submit前の処理
    // code...

    $('#form').submit();
  });
});

上記のコードだと、HTML側で以下のようにinputタグにrequire属性を用いたバリデーションをおこなっていた場合、バリデーションが無視されてsubmit処理が走ってしまうのだ。

<form id="form" method="POST" action="">
  <input type="text" name="name" value="" required>

  <input type="submit" id="submit-button" value="送信">
</form>

この問題について、次のコード6～8行目を追加することで解消することができる。

$(function(){
  $('#submit-button').click(function(){
    // submit前の処理
    // code...

    if(!$('#form')[0].reportValidity()) {
      return false;
    }

    $('#form').submit();
  });
});

reportValidityメソッドは、任意のタイミングでフォーム全体の検証を行いその結果を返すメソッドで、上記のif文は検証に失敗した場合に処理を終了させることを意味している。