「jQuery-Validation-Engine」を入手する

まずは、「jQuery-Validation-Engine」を使うための準備をします。

  1. 公開サイトからZIPファイルをダウンロードし、
  2. 必要なファイルを抜き出して
  3. 自身のウェブサイトにアップロードしましょう。

以下の手順で操作して下さい。

■1. 「jQuery-Validation-Engine」をダウンロードする
GitHubから一式をダウンロード

GitHubから一式をダウンロード

GitHub内の「jQuery-Validation-Engine」公開ページ(英語)にブラウザでアクセスして、右図のように右端にある区画から「Clone or download」と書かれた緑色のボタンをクリックし、さらに「Download ZIP」と書かれたリンクをクリックします。すると、ZIP形式に圧縮されたファイル一式をダウンロードできます。

本稿執筆時点では、ファイル名は「jQuery-Validation-Engine-master.zip」で、ファイルサイズは656KBでした。


 
■2. ZIPファイルを展開する

jQuery-Validation-Engine-master.zipの中身。必要なのは、cssフォルダとjsフォルダ。

jQuery-Validation-Engine-master.zipの中身。必要なのは、cssフォルダとjsフォルダ。

ダウンロードしたZIPファイルを展開すると、右図のような中身が出てきます。複数のフォルダと、たくさんのファイルが含まれていますが、必要なのは以下の4ファイルのみです。

  1. CSSファイル
    /css/validationEngine.jquery.css
  2. jQuery本体
    /js/jquery-1.8.2.min.js
  3. 「jQuery-Validation-Engine」日本語化スクリプト
    /js/languages/jquery.validationEngine-ja.js
  4. 「jQuery-Validation-Engine」本体
    /js/jquery.validationEngine.js

様々な言語での表示に対応

様々な言語での表示に対応

※エラーメッセージを日本語で表示させたい場合は、上記の3のように「jquery.validationEngine-ja.js」が必要です。もし、英語で表示させたい場合には、「jquery.validationEngine-en.js」が必要です。32種類の言語スクリプトが用意されていますので、望みの言語に合ったファイルを選んで下さい。


 
日本語エラーメッセージを使ったデモページ

日本語エラーメッセージを使ったデモページ

※demosフォルダの中にある「demoValidators.ja.html」をブラウザで表示すると、日本語での入力チェックのサンプルを閲覧できます。設問や選択肢は(他の各サンプルHTMLと同様に)英語ですが、入力内容が指定条件に合致しなかった場合に表示されるエラーメッセージは日本語で表示されます。


 
■3. 必要ファイルを自身のウェブサイトにアップロード
フォルダ構成はそのままアップロード

フォルダ構成はそのままアップロード

抜き出した4ファイルを、自身のウェブサイトの適当な場所にアップロードします。その際、フォルダ構成は崩さないようにします。フォルダ構成を変更した場合は、これ以後のソースも、フォルダの記述部分を適宜修正して下さい。

※jQuery本体(jquery-1.8.2.min.js)は、別途最新版を使っても構いません(後述)。


 
さて、これで必要なファイルは用意できました。次に、「jQuery-Validation-Engine」を読み込んで、指定のフォームで入力チェックができるように準備しましょう。