jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

jQuery-Validation-Engineで簡単にフォーム内容をチェック!

2015年2月20日
この記事は掲載から887日経過しています。
情報が古い可能性が有りますのでご了承下さい

フォームを伴うHTMLコードを書いていると、どうしてもバリデーション(入力値の妥当性確認)が必要になります。 HTML5になると、フォーム属性である程度はカバー出来ますが、全てのブラウザがHTML5に対応し、かつ利用者の多くがこれの恩恵を受け、かつ対応出来ないブラウザを利用している方を切り捨てる時代になるにはまだまだ数年掛かります。

バリデーションの方法は大きく分けてPOST後とPOST前の二種に分かれます。 POST後のバリデーションは送信された際に、PHPやCGI側で入力内容をチェックし、エラーならメッセージを表示させるなどです。

厳密にチェックするならばこれが一番ですし、エラーメッセージなどデザイン部分も色々と工夫する事が出来ます。 ただ、簡単なメールフォームでいちいちメールアドレス形式かどうかを確認する為だけにPOSTし、エラーメッセージを表示するプログラムを書くのは面倒です。

※SQLインジェクションに関して誤解をされている方がいるようなので該当部分を削除しました。int系のフィールドに対して数値入力に制限させたい、といった事前処理として有効であるという意味です。POST後にも値を検証するのは当然の事で、jsのみでSQLインジェクション等に対抗出来る訳では御座いません。

最近はjavascriptを使い、POSTの前に入力値を確認する方法が主流になっています。色々なライブラリが公開されていますが、私が愛用しているjQuery-Validation-Engineのご紹介と利用方法を説明したいと思います。

ダウンロードはGitHubからどうぞ

色々とファイルが入っていますが、使うのは以下だけです。あと、jQueryライブラリーなのでこれも読み込んでおいて下さい。

初期設定

#formの部分が重要で、formに設定したIDとします。

メッセージの位置(1)

表示されるメッセージの位置を変更します。

bottomLeft
bottomRight
topLeft
topRight
 

メッセージの位置(2)

ちょっと見辛くはなりますが、左右に表示する事も可能です。

centerLeft
centerRight

あと、エラーメッセージをガツンと表示したい場合などはインラインを指定すると良い感じです。

inline

エラーメッセージを変更する

基本的にランゲージファイルで各フォームで共用するのが楽ですが、フォームごとにメッセージを変更したいケースがあると思います。

エラーメッセージの位置を個別に変更する

フォームによっては、画像や説明文などに被ってしまい、メッセージの位置を個別に変更したいケースもあると思います。

bottomLeft

bottomRight

topLeft

topRight

inline

テキストエリアの設定 – 基本

 

テキストエリアの設定 – 文字数を制限する

3文字以上

6文字以内

3文字以上6文字以内

 

テキストエリアの設定 – 入力値をURLやメールアドレスなどに制限する

email

url

 

テキストエリアの設定 – 数値に制限する

12.45はダメ

 

パスワード – 一致確認

一致確認はパスワードに限りません。以下はメールアドレスのケース

 

セレクトボックス

 

ラジオボタン

idをユニークにする点に注意して下さい。

但し、本来のラジオボタンは「選択されている状態」がデフォルトで、選択されていない状態ということ自体が厳密には正しく有りません。。つまり、ラジオボタンにはバリデーションそのものが本来は不要です。

しかし、デフォルトでチェックしておくとユーザーが見落とす場合が有り、それを詐欺だと言う方も居るようで、バリデーションを入れておくのが慣例となっているようです。

 

チェックボックス

   

その他色々と有りますが、ダウンロードしたファイルにサンプルが有りますのでそちらをご覧下さい。一般的なフォームであれば、このくらいを覚えておけばどうにかなります。 さて、jQuery-Validation-Engineはバリデーションが完了した際にPOSTせず、関数を実行する事が出来ます。私がこれを愛用している最大の理由となります。

このように設定すると、入力チェックが完了して送信可能な状態になった際に、beforeCall()が実行され、POSTされません。

これが出来ると、ここで確認画面を表示する処理が行えるのです。つまり、POSTせずにノンリロードで確認画面を表示する、最近流行りのアレです。

そもそもなぜノンリロードで確認画面を表示する必要があるのか?ですが、利用者にストレスを与えない点と、サーバーとの無駄な通信を行う必要がないためです。

また、上記のページでは言及していませんが、一番最後に非同期通信で送信するのではなくPOSTする事も可能です。つまり、入力→確認画面→戻る→確認画面、という一連の流れはノンリロードで行い、最後の送信部分だけPOSTします。

覚えてしまうと本当に簡単ですので、ぜひ使ってみて下さい

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

このカテゴリーのその他の記事

PAGE TOP