軽くてシンプルなフォームのバリデーションをおこなうjQueryプラグン「Validetta」!

2014/11/24

こんにちは。
今回は軽くてシンプルなフォームのバリデーションをおこなうjQueryプラグン「Validetta」の紹介をしたいと思います。

簡単なチェックをスクリプトで行いたい時におすすめなプラグインです。

 

サンプルはこちら

 

ダウンロードしてみよう!

下記のリンクをクリックして、Validettaのサイトに行き、Download Validettaのボタンをクリックし、ダウンロードします。

jquery_validetta

Validetta – A tiny jquery plugin for validate forms

 

設置してみよう!

先ほど、ダウンロードしたファイルを設置していきます。
まずはダウンロードしたファイルのvalidetta.cssをhead内に読み込みます。

 

jQuery本体とvalidetta.jsを/bodyの手前に読み込みます。

 

その下に下記の記述をします。

 

html部分は下記のように記述します。

 

フォームの各要素にdata-validettaを記述し、下記の項目を選択して記述します。

required
記入してあるかどうか
number
数字かどうか
email
メールの形式かどうか
creditCard
クレジットカードの形式かどうか
equalTo[input_name]
2つのフィールドが同じかどうか
minLength[x]
最小文字数
maxLength[x]
最大文字数
minChecked[x]
チェックボックスの最小の数
maxChecked[x]
チェックボックスの最大の数
minSelected[x]
セレクトボックスの最小の数
maxSelected[x]
セレクトボックスの最大の数
custom[regexp_name]
正規表現を使ったチェック
remote[validator]
外部ファイルを使ったチェック

 

エラーメッセージを変更したい場合はvalidetta.jsの18行目から30行目のそれぞれのメッセージを変更して下さい。

 

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

 

簡単に設置できますね。
以上で軽くてシンプルなフォームのバリデーションをおこなうjQueryプラグン「Validetta」の紹介でした。

topへ戻る