jQuery Validation

 

今回はフォームのバリデーションが簡単に実装できる『jQuery Validation(jquery.validate.min.js)』の御紹介です。このjQueryプラグインを使うとクライアント向けのバリデーションを簡単に実装できます。

フォームの不備に対してエラーメッセージを送信する場合は、送信ボタンを押してからより、リアルタイムでチェックしてくれたほうがユーザは直しやすいのでUI上宜しいでしょう。

 

このプラグインは下記サイトでダウンロード出来ます。

https://jqueryvalidation.org/

 

バリデーションって何?

jQuery Validation バリデーション フォーム forrm

ユーザがきちんと、運営側が想定している値をフォーム入力してくれたかチェックする機能です。

会員登録などWEBのフォームに入力したことがあれば、見たことがあるでしょうか。JavaScriptを採用することで、リアルタイムでチェック出来るようになるので、ユーザに優しい設計になります。ただし、このプラグインは一般ユーザ向けの入力ミスに対するバリデーションであり、JavaScriptを無効化されている場合は機能しないことから、セキュリティに関してはサーバサイドのスクリプト側で検証できるようにプログラミングするようにしたほうが良いですね!

 

動画

スクリプト読み込み例

バリデーションプラグインのjquery.validate.min.jsと、jQuery本体のjquery.min.jsを読み込み、実際の動きはjquery.validate..handler.jsなど別ファイルを作ってそこに記述する形で良いかと思います。

そのまま直接ファイルに記述してしまっても好みでOK!

 

 

rules

上記はrequiredオプションのみ有効にしています。

 

主なバリデーション項目 rulesオプション

  • required : true or false
    必須項目
  • email : true or false
    Emailのフォーマットになっているかチェック
  • equalTo : “要素名”
    要素の値と一致しているか
  • number : true or false
    整数型かどうか
  • birth : true or false
    日付を検証
  • minlength : 数字
    最小文字数を指定
  • maxlength : 数字
    最大文字数を指定
  • rangelength: [最小数, 最大数]
    最少数~最大数の間の文字数かを検証

 

この項目は絶対に入力して欲しいといった場合はrequired:trueとします。他、文字数指定など色々な指定があります。

equalToオプション 同一値かを検証

フォーム部品のid=”email”に入力された値と、フォーム部品のname=”reemail”に入力された値が一致しているかを、equalToオプションで検証しています。

 

 

 

messages

rulesで指定したディレクティブに対して、メッセージを変更出来ます。デフォルトは英語なので、日本人向けに日本語にするほうが親切です。

 

errorPlacement

チェックボックスやラジオボタンなど、要素が連続するものについては、エラーメッセージ挿入箇所をerrorPlacement指定しましょう。設定を行わないと上記の画像のように、崩れます。これはjQuery Validationのデフォルト設定が要素の最後にエラーメッセージ挿入されるからです。

以下のように設定します。

フォーム部品のname=”CheckboxGroup1[]”については、id=CheckboxGroup1_errorの要素の後にエラーメッセージを挿入するように設定しています。

 

 

HTML

フォームタグのname=”CheckboxGroup1[]”の要素について、エラーメッセージが出る箇所を

としてidを指定しています。

 

修正後

jQuery Validation バリデーション フォーム forrm

これで大丈夫。

 

エラーメッセージの色を指定する場合

redに指定しています。

 

 

 

サンプル例

 

全てのバリデーションをjQuery側で対処せずに、XSS(クロスサイトスクリプティング)などの対策は別途、サーバーサイドのスクリプトで対応すれば良いかな。

クライアントサイドには必須項目とか一般向けのバリデーション、サーバーサイドスクリプトでは攻撃に対するセキュリティ対策を行う。JavaScriptだけでは、ブラウザで無効化されたら攻撃者側には意味をなさないからです。

 

シンプルな対策は確認ページに遷移させずに、ユーザ側にブラウザで入力内容を展開しないこと。メールでの送信確認のみにするのが簡単。特殊な要件がないならこのライブラリで事もなし。脳もとろける。

 

このように便利なライブラリがあることを知っていると、製作時間をぐっと短縮出来ます。

お疲れ様です。

金広 優 (エンジニア)
この記事を書いた人:金広 優 (エンジニア)

システムガーディアン爆弾処理班。アクセス負荷対策やNginxへの移行案件が多いこの頃。IBM SoftLayerやAWSなどクラウド案件も多くなってきました。