livevalidation.js

機能紹介

フォームの入力内容を瞬時にチェックするlivevalidation.jsを搭載しています。

必須ライブラリ

prototype.js 1.6以上

動作確認ブラウザ

• IE 8.0.6
• Firefox 3.5.3
• Chrome 9.0.5
• Safari 4.0.3

設定項目

設定を変更したい場合は、livevalidation.registerの第二引数にconfigオブジェクトを割り当てます。

config.enabled = true;

このフォームの入力チェックを有効にするかどうか。

config.first_focus = true;

アクセス時に初めのフォーム要素にフォーカスを当てるかどうか。
長いページではフォーカス位置までスクロールしてしまうので無効にできます。

config.textarea_resizing = true;

テキストエリアを改行数に応じて自動的に伸縮させるかどうか。
有効な場合は高さが3倍まで広がります。

config.text_counter = true;

テキストフォームへ入力された文字数をステータスバーに表示させるかどうか。

config.maxlength = true;

一行入力フォームにmaxlength属性を付けるかどうか。
付けると一定数以上の文字を入力できない様に制限できます。

config.error_pos = true;

入力エラー文を対象フォームの上に表示させるかどうか。
falseの場合は下に表示させます。

config.done_mark = '(済)';

入力エラー訂正時に付加する訂正済みマーク。
空にした場合は訂正時にエラー文を消去します。

config.action_path = 'ファイルパス';

これはページのフォーム情報をスキャンするスパムソフトを欺く為に使います。
使い方は、action_pathに正しい送信先を指定して、入力画面の<form action="">に偽の送信先を指定します。
こうしておくと、偽の送信先がスパムのターゲットになります。
他のサイトを指定すると迷惑になりますので、必ずご自身で偽ファイルを用意して下さい。

オプション定義

空欄の入力フォームに「入力して下さい」の様な透かし文字を表示できます。
livevalidation.registerの検証定義に「watermark: '入力して下さい'」と追加します。

複数フォームへの実装

複数のフォームで使うには、フォーム要素の検証定義を続けて登録すればOK。

// 検索フォーム
livevalidation.register([
	{id: 'keyword', name: 'キーワード', required: true, min: 0, max: 300, watermark: 'キーワードを入力して下さい'}
]);
// 感想フォーム
livevalidation.register([
	{id: 'name', name: 'お名前', required: true, min: 0, max: 300},
	{id: 'comm', name: 'ご感想', required: true, min: 0, max: 300}
]);

ボタンリンク

チェックボックスのすべてにチェックを付けるボタン
対象となるチェックボックスの識別IDを指定します。
<p> <a href="javascript:void(0);" id="livevalidation-checksAllOn" title="識別ID">[すべてにﾁｪｯｸを付ける]</a> <a href="javascript:void(0);" id="livevalidation-checksAllOff" title="識別ID">[すべてのﾁｪｯｸを外す]</a> </p>

入力の必要がない任意項目を開閉できるボタン
<p><a href="javascript:void(0);" id="livevalidation-toggleOptionalItem" title="[任意項目を開く]">[任意項目を隠す]</a></p>

スタイルシート

livevalidation.jsのスタイルについては同梱のlivevalidation.cssにて変更できます。