全モダンブラウザがrequestSubmit()サポート完了。submit送信するならこの書き方でOK。

Safari 16.0でrequestSubmit関数をサポート対応

Safari v16.0 が2022/9/12にリリースされました。
このリリースでサポートされた機能には<form>.requestSubmit() という関数が含まれています。
今までjs側処理でSubmitを実行する場合、submit関数を使用することが多かったです。では本件のrequestSubmit関数とはどんなメリットがあるのでしょうか？

これまでのsubmit()関数のデメリット

これまでもフォームエレメントを取得してjsにてsubmit()を行うことは可能でした。
しかしsubmit()を実行した場合のデメリットとして、フォーム内に書かれたバリデーション属性のチェックを無視して、単に送信のみが実行されてしまっていました。

submit関数の実行イメージ

<form name="form">
<input type="text" name="required" required>回答必須
</form>

const myForm = document.querySelector("form");
myForm.submit(); //←必須の入力フォームが空白でもチェックなしで送信される。。

バリデーション属性一覧
※参照： MDN > 制約検証

• pattern
• min
• max
• required
• step
• minlength
• maxlength

今回requestSubmit()で改善へ

今回Safari 16でサポートされたrequestSubmit関数では、きちんとバリデーション属性の値をチェックして、エラーが発生した場合はsubmitを中止してくれます。
※参照： MDN > requestSubmit

バリデーションエラーがある場合のsubmit()とrequestSubmit()の挙動の違い（Gifアニメ）

▼ ポイント
・submit関数：バリデーションエラーがあっても無視して送信実行
・requestSubmit関数：バリデーションエラーがあったらsubmitせず中止し、適切にエラー処理してくれる

検証動画のhtml部分

<div class="wrap">
  <p class="description">submit()とrequestSubmit()について<br>バリデーション属性での比較</p>
  <form name="form">
    <input type="text" name="only-number" pattern="^[0-9]+$">pattern：数字のみ<br>
    <input type="number" name="min2" min="2">min：最小値2以上の数字<br>
    <input type="number" name="max2" max="2">max：最大値2以下の数字<br>
    <input type="text" name="required" required>required：必須（空不可）<br>
    <input type="text" name="minlength" minlength="5">minlength：空 or 5文字以上<br>
    <input type="text" name="maxlength" maxlength="5">maxlength：5文字以下<br>
    <input type="number" name="step" step="0.5">step：単位0.5ごと<br>
    <button type="submit" id="submitBtn">Submitボタン</button> 
    <button type="button" id="inputErrorBbtn" onclick="inputErrorBtn()">エラー発生文字挿入</button>
    <button type="reset">Reset</button> 
  </form>
  
  <button type="button" class="funcButton" name="requestsubmit_simple" onclick="simpleSubmit()">submit 関数実行</button><br>
  <button type="button" class="funcButton" name="requestsubmit_request" onclick="requestSubmit()">requestSubmit 関数実行</button>
</div>

検証動画のjs部分

const form = document.querySelector("form");
const submitButton = form.querySelector("#submitBtn");

function simpleSubmit(e){
  form.submit();
}
function requestSubmit(e){
  if (submitButton) {
    form.requestSubmit(submitButton);
  } else {
    form.requestSubmit();
  }
}
function inputErrorBtn(){
  document.querySelector('input[name="only-number"]').value = "あ";
  document.querySelector('input[name="min2"]').value = "1";
  document.querySelector('input[name="max2"]').value = "9";
}

モダンブラウザのサポート状況

今回のSafari対応でモダンブラウザ全てでサポートされました。
CanIuse > requestSubmit()

今後はjsでのsubmit送信は
submit()ではなく requestSubmit() を安心して使っていけそうですね。