はじめに

Validettaとは、シンプルかつ軽量なフォームのバリデーションを行ってくれるjQueryのプラグインです。簡単な入力チェックをスクリプトで行うときにおすすめ。

ダウンロード

ここ(Validetta)から、Validettaのサイトに行き、トップにある緑のDownload Validettaボタンをクリックすれば出来る。

使い方

まずは、ダウンロードしたファイルを設置していく。まずは、ダウンロードしたファイルのvalidatta.cssをhead内に読み込む。

<link rel="stylesheet" href="css//validatta.css">

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

<script type="text/javascript" src="js/jqury1.9,1.min.js"></script>
<script type="text/javascript" src="js/validetta.js"></script>

その下に、以下を記述する

<script>
$(document).ready(function() {
  $("#form").validetta();
});
</script>

html部分は以下のように記述する

<form id="form">
  <input type="text" name="exm" 
  data-validetta="required,minLength[2],maxLength[3]">
</form>

これだけで、簡単に利用することができる！

※複数のバリデーションをかけたい時は、上記のようにコンマで区切りスペースは入れない。入れるとバリデーションが効かなくなる。

チェック項目

フォームの各要素のdata-validettaを記述し、以下の項目を選択してバリデーションを行う。他にも、自分がチェックしてほしい項目も自作可能なので、欲しい機能がなければ作成するのもあり！

• required

記入してあるかどうか（空白かどうか）

• number

数字かどうか（先頭の-は数字と判断）

• email

メール形式かどうか

• creditCard

クレジットカード形式かどうか

• equalTo[input_name]

2つのフィールドが同じかどうか

• minLength[x]

最小文字数

• macLength[x]

最大文字数

• minChecked[x]

チェックボックスの最小数

• maxChecked[x]

チェックボックスの最大数

• minSelected[x]

セレクトボックスの最小数

• maxSelected[x]

セレクトボックスの最大数

• custom[regexp_name]

正規表現を使ったチェック

• remote[validator]

外部ファイルを使ったチェック

エラーメッセージの変更

エラーメッセージも任意に変更することが出来る。validetta.jsの18行目から30行目に記載してあるメッセージを変更すればOK

messages = {
    required  : 'This field is required. Please be sure to check.',
    email     : 'Your E-mail address appears to be invalid.',
    number    : 'You can enter only numbers in this field.',
    maxLength : 'Maximum {count} characters allowed!',
    minLength : 'Minimum {count} characters allowed!',
    maxChecked  : 'Maximum {count} options allowed.',
    minChecked  : 'Please select minimum {count} options.',
    maxSelected : 'Maximum {count} selection allowed. ',
    minSelected : 'Minimum {count} selection allowed. ',
    notEqual    : 'Fields do not match. Please be sure to check.',
    creditCard  : 'Invalid credit card number. Please be sure to check.'
}

以上