HTML5 form バリデーションをJSから起動する方法

Question

HTMLの形上　submit ボタンをフォームの外につける必要がでたので

<div id="container">
  <form id="form">
    <input type="number" required>
　　
  </form>
</div>

<button id="submit" type="button">OK</button>

みたいな感じの HTML で JS でトリガーして submit を発火させたんですが

$('#submit').on('click', () => {
  $('#form').submit();
});

HTML5 のバリデーション表示が発生しません
JS から submit イベントを起こした場合にもバリデーションを表示させる方法はないですか？

追記：

<input type="submit" name="commit" value="OK" class="button">

ためしにフォームの中にサブミットボタンを追加してみましたがこちらのボタンを押したところバリデーションメッセージがでます

Comments

[m.ts10806]

時間が経ってのベストアンサー取り消しは回答者としては不信感を抱くことになりますので、一言ください。

[退会済みユーザー]

そうなのですね
失礼しました
自分は最初の方法で解決したのでベストアンサーでかまわなかったんですが
ご自身で他の方の解凍のほうがいいですよとおっしょあってたので変更したほうがいいのかなと
であれば戻しておきます
申し訳ありません

[m.ts10806]

戻す必要はなくて私のコメントから数日経っているので、結局どうしたのかという一言が欲しかっただけです。そこでまた無言で移すと元の回答のかたにも失礼ですし

[m.ts10806]

「ベストアンサー」なので先とか後とかなくて、よりベターな方を選ぶのはありです。ただ一言はあったほうが変な軋轢をうまなくてすむよという話です

[退会済みユーザー]

数日たっているのは単に土日をはさんでしまったので今朝気づいたところでした
最初の「display:none にしたサブミットボタンをつけてそのクリックイベントを発火させてみることにします」とかいたとおりこれで解決しました
せっかく回答していただいたのにお手数おかけして不快な思いをさせてしまって本当に申し訳ないです

[m.ts10806]

了解です。解決されたようで何よりです。(裏の話をすると日付変わったあとにベストアンサー取り消しが起きるとスコアマイナスが入る仕様なので「何があったんだろう」と頭に？？？がたくさん浮かぶのです…)

[m.ts10806]

いずれにしても私の回答は解決までのプロセスとしては合っていても解決策としては不十分なので、x_xさんの回答で解決済みとしてもらえればと。

[退会済みユーザー]

わかりました

Answer 1

submit()を呼び出したときは検証されません。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
(日本語訳は誤訳なので注意)

reportValidity()メソッドで検証できるので呼び出してください。

  $('#submit').on('click', () => {
    if ($('#form')[0].reportValidity()) {
      $('#form').submit();
    }
  });

https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation

Comments

[退会済みユーザー]

ありがとうございます
サブミットボタンをおかなくてもJSだけでもできたんですね

[退会済みユーザー]

大変申し訳ありません
こちらの回答のほうがスマートだと思ったのですが
最初に来た方の回答ですでに解決してしまっていたのでベストアンサーを取り下げさせていただきます

Answer 2

試してませんがボタンがform内にないからでは？
幾らformを指定しても送信ボタンとの連動性が失われていると効果がないように思います。

<form>タグ閉じてないのも気になりますが・・

幾つか検証しました。

$('#submit').on('click', () => {
    console.log("a");
  $('#form').submit();
});

formの外

  <form id="form">
    <input type="number" required>
  </form>
  <button id="submit" type="button">OK</button>

一瞬コンソール表示されるが、送信される

formの中

  <form id="form">
    <input type="number" required>
    <button id="submit" type="button">OK</button>
  </form>

コンソール表示され、送信もされない。
※required外しても送信されない

「送信されない」はともかくとしてそもそもhtml側の仕様なので「外から後付で起動」は無理なのでは？と予想します。

Comments

[退会済みユーザー]

form のとじミスは質問文のミスで実際のソースは閉じていました　
＞幾らformを指定しても送信ボタンとの連動性が失われていると効果がない
ということは外から form の submit を読んでも無理ということなんですね

display:none にしたサブミットボタンをつけてそのクリックイベントを発火させてみることにします
ありがとうございました

[m.ts10806]

検証してみた結果を載せました。
あと「できる方法」が回答としてついたようですのでそちらを試された方が良いかも知れません。