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

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

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

サイトのキャプチャ

Validetta
Validetta -GitHub

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]
正規表現を使ったチェック

top of page

©2017 coliss