jQuery を使用してフォーム検証を手動でトリガーする質問する

Question

要約:古いブラウザを気にしない？form.reportValidity()。

従来のブラウザのサポートが必要ですか? 続きをお読みください。

それは実際にはは手動で検証をトリガーすることが可能です。

再利用性を高めるために、回答ではプレーンな JavaScript を使用します。jQuery は必要ありません。

次の HTML フォームを想定します。

<form>
  <input required>
  <button type="button">Trigger validation</button>
</form>

JavaScript で UI 要素を取得してみましょう。

var form = document.querySelector('form')
var triggerButton = document.querySelector('button')

Internet Explorer などの従来のブラウザのサポートは必要ありませんか? これはあなたのためのものです。

すべての最新ブラウザサポートのreportValidity()要素に対するメソッドform。

triggerButton.onclick = function () {
    form.reportValidity()
}

これで終わりです。また、シンプルなCodePenはこちらこのアプローチを使用します。

古いブラウザへのアプローチ

reportValidity()以下は、古いブラウザでエミュレートする方法の詳細な説明です。

しかし、これらのコードブロックを自分でプロジェクトにコピー＆ペーストする必要はありません。ポニーフィル/ポリフィルすぐにご利用いただけます。

サポートされていない場合はreportValidity()、ブラウザを少し騙す必要があります。それでは、どうすればよいでしょうか?

を呼び出してフォームの有効性を確認しますform.checkValidity()。これにより、フォームが有効かどうかがわかりますが、検証 UI は表示されません。
フォームが無効な場合は、一時的な送信ボタンを作成し、クリックをトリガーします。フォームが有効でないため、知るそれはないだろう実はただし、送信すると、ユーザーに検証のヒントが表示されます。一時的な送信ボタンはすぐに削除されるため、ユーザーには表示されません。
フォームが有効な場合は、何も介入する必要はなく、ユーザーが続行できるようにします。

コードでは:

triggerButton.onclick = function () {
  // Form is invalid!
  if (!form.checkValidity()) {
    // Create the temporary button, click and remove it
    var tmpSubmit = document.createElement('button')
    form.appendChild(tmpSubmit)
    tmpSubmit.click()
    form.removeChild(tmpSubmit)

  } else {
    // Form is valid, let the user proceed or do whatever we need to
  }
}

このコードは、ほとんどすべての一般的なブラウザで動作します (IE11 まで正常にテスト済みです)。

実際に動作する CodePen の例を次に示します。

Answer 1