AMG Solution

jQueryライブラリを使用して、簡単Form項目の入力チェック実装

こんにちは、樋口です。

画面から入力された、入力値の入力チェック。
WEBシステムを制作した方は、一度は経験があるのではないでしょうか。
実際に入力チェックを実装すると、いろいろと面倒だと思います。

そこで今回は、jQueryライブラリである、jquery.validateについてご紹介します。

今回は下記ライブラリを使用して説明をしていきます。

jQuery
1.10.2
validate
1.15.0
BootStrap(CSS使用)
3.2.0

ライブラリの入手

jquery.validateの使用は下記公式サイトよりダウンロードできます。
jquery.validate公式サイト
ダウンロード後ZIPファイルを解凍し、「jquery.validate.min.js」を読み込むことにより使用可能となります。
※ ライブラリパスは、自身の設置したものを記載してください。

必須入力の追加

まずは、入力用のHTMLを用意してきます。
ここでは、名前を入力するエディットを用意します。

– index.html

次に、入力チェックを有効にする為、JSファイルを作成し下記内容を記載します。
※ 今回は、「valCheck.js」を使用していきます。

– valCheck.js

以上で、必須入力の設定が完了です。
実際に名前エディットに、値を入力せずにフォーカスアウトした時にエラーメッセージが出力されるようになりました。

– 必須入力エラー
1-2

最小文字数・最大文字数の追加

次に先ほどの名前エディットに、最小文字数・最大文字数の入力チェックを追加します。
先ほどのJSファイルに下記内容を追加します。

– valCheck.js

– 最小文字数エラー
1-1

– 最大文字数エラー
1-3

数値入力チェックの追加

次に、数値のみの入力チェックを追加します。

– index.html

JSファイルに、数値チェックを追加します。

– valCheck.js

– 数値入力エラー
1-4

アドレスチェック

次に、アドレスの入力チェックを追加します。

– index.html

JSファイルに、アドレスチェックを追加します。

– valCheck.js

– メールアドレス入力エラー
1-5

最後に

今回紹介したライブラリを使用した入力チェックは、他にもありますので、興味がありましたらぜひ調べてみてください!
今後もjavaScriptの便利ライブラリについて紹介していけたらと思っています。

それではまた。

HIGUCHI'S BLOG

樋口一成の記事

樋口一成の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

新卒採用
はじめました。
LOADING