【jQuery】jQueryでform送信(submit・ajax)する際に、ブラウザ機能でバリデーションする

  • このエントリーをはてなブックマークに追加

例えば押されたボタンによって送信先を変更したい場合や、一部の項目のみを外部に送信する場合など、jQueryを利用してフォーム送信する場合があると思います。

HTML5には、必須項目(required)やパターン(pattern)など、ブラウザが対応しているバリデーション項目が存在しています。

これをjQueryで送信する場合でも活用する方法をメモしておきます。

仕様的に楽をしたい場合(おい)や、スクリプト作成前などに上記のバリデーション項目を設定することがあるかと思います。

せっかく設定したものが無効になるというのは面倒なものです。

活用できるものは活用し、作業工数を減らしていきましょう。

追加すべき処理について

reportValidity();
checkValidity();

上記いずれかを追加することで、任意のタイミングでバリデーションが可能になります。

どちらも True or False を返しますが、reportValidity メソッドはユーザーにエラーが表示されます。

このときに表示されるエラーメッセージはブラウザ依存です。

UI的には reportValidity を利用するほうが便利そうですね。

対象の指定方法について

form 要素指定でも、form 内の input 要素指定でもどちらでも動作します。

form 要素を指定した場合は、すべてのバリデーションチェックが問題なかった場合に True が返ります。

form 要素を指定したほうが楽ではありますが、状況によって form 要素を指定できない場合もあるかもしれません。

知っておくと臨機応変に対応できるかと思います。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*