前の記事 ≪:インストール済みフォントを一覧・コピー「fonfon」v1.2
次の記事 ≫:JavaScriptのテンプレートエンジン色々

JavaScriptでフォームの値をリアルタイムにバリデートするライブラリまとめ

2007年03月02日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法

JavaScriptでフォームの値をリアルタイムにバリデートするライブラリまとめ。
バリデートするライブラリも沢山でてきました。とここら辺で一度まとめておきました。

  • Really easy field validation (デモ) - 入力値がおかしいと、エラーメッセージをフェードインさせながら超クールに表示できます。
    ※ ページの最後で使い方紹介(これは良いです)

    Remember the milk風の登録フォームも作れそう
    prototype.js依存。
  • Realtime validation using Ajax (デモ) - Ajaxなどを駆使して、入力値を動的にチェックするライブラリ

  • Validate.js (デモ) - リアルタイムではないけど、入力値をチェックするためのライブラリ

  • Tooltip for forms - 入力チェックではないけど、フォームの入力ヒントを出してくれるライブラリ

ということで、最初に紹介した、「Really easy field validation」の使い方を見ていきましょう。
使い方がかなりシンプルになっています。実装方法を次に述べます。

1) スクリプト読み込み

<script src="prototype.js" type="text/javascript"></script>
<script src="validation.js" type="text/javascript"></script>

script.aculo.us のeffect.jsも読み込めばフェードイン効果を付けることが可能です。
読み込まれているかどうかは自動で判別してくれます

2) エレメント作成

<input class="required validate-number" id="field1" name="field1" />

classの値に、required validate-number のように、スペース区切りで入力値のルールを指定します。
この指定方法がすごくシンプルで使いやすいですね。エレメント自体にそのルールを記述する、というのが直感的で扱いやすい感じです。

ルールには他にも次のようなものがあって、入力欄の性質に応じてclassを変えるだけというお手軽さです。

required (空白不可)、validate-number (数字チェック) 、validate-digits (数値チェック) 、validate-alpha (アルファベットチェック)
validate-alphanum (アルファベット&数字チェック) 、validate-date (日付チェック) 、validate-email(Eメール形式チェック)、validate-url (URLチェック

3) フォームを初期化

<script type="text/javascript">
     new Validation('form-id'); // OR new Validation(document.forms[0]);
</script>

form-id 部分に<form id="〜">のid値を入れることでどのフォームを初期化するか指定。
紹介しきれていない機能が他にもありますが、以上のような感じで実装も非常にシンプルでいいですね。

この分野もいろいろ便利なライブラリが出てきそうです。

関連エントリ

関連の記事検索:JavaScript, Ajax, ライブラリ, validation, フォーム, まとめ
スポンサード リンク

By.KJ : 2007年03月02日 07:02 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)