[JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta

サーバー側でしかできないチェックはサーバー側に任せ、フォームに入力したデータの簡単なチェックはスクリプトで対応したいという人にぴったりなjQueryのプラグインを紹介します。

必須項目の入力漏れやメールアドレスの簡単なチェックなど、スクリプトなので即時にエラーメッセージが表示されます。

Validetta
Validetta -GitHub

• Validettaのデモ
• Validettaの使い方

Validettaのデモ

デモはChrome, Safari, Firefox, Operaなどのモダンブラウザ、IEは8+でご覧ください。

デモ

デモではさまざまなフォームの入力内容のチェックを試すことができます。
エラーメッセージは英語ですが、全てを簡単に変更することができます。

必須項目の入力の有無、文字数は2-3文字かどうか
↑の日本語でも1文字としてカウントされています。

数字かどうか

メールアドレス、必須項目の入力の有無

クレジットカード

選択しているのが1 or 2つかどうか

選択しているのが2つかどうか

Validettaは、以下の項目がチェックできます。

• データが空かどうか。
• 電子メールのチェック。
• 数字のチェック。
• クレジットカード番号のチェック。
• フィールド内の文字数のチェック。
• チェックボックスやセレクトボックスの選択数のチェック。
• 2つのフィールドが同じかどうか。
• 正規表現を使ったフィールドのチェック。

Validettaの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。

<link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" >

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="validetta/validetta.js"></script>

メッセージの表記を変更したい場合は言語ファイルを使用します。

<script type="text/javascript" src="validetta/languages/validettaLang-tr.js"></script>

エラーメッセージはこんな感じにまとめて管理されています。

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

Step 2: JavaScript

フォームをjQueryのセレクタで指定し、スクリプトを初期化します。

$(document).ready(function() {
    $("#form").validetta();
});

Step 3: HTML

フォームの各要素に「data-validetta」を加え、チェックする内容を指定します。

<input type="text" name="example" data-validetta="required,minLength&#91;2&#93;,maxLength&#91;3&#93;" />

チェックの記述は、下記の通りです。

required

データが空かどうか

number

数字

email

メールアドレス

creditCard

クレジットカード

equal[input_name]

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

minLength[x]

最小文字数

maxLength[x]

最大文字数

minChecked[x]

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

maxChecked[x]

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

minSelected[x]

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

maxSelected[x]

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

customReg[regexp_name]

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