MOONGIFT

オープンソース・フリーウェアを毎日紹介するブログ。日々の業務の効率化、新しいサービスのネタ探しにどうぞ。SNS、SBS、CMS、オフィス、画像編集、ユーティリティ、Firefoxアドオン、テキストエディタ、ゲーム…ジャンルは様々。

今すぐに使えるリアルタイム入力チェックライブラリ「Vanadium」

タグ: [] [] [] [] [] []

buzz_button

Webフォームから飛んできた値について、入力チェックを行わないということはまずないだろう。数字のところに文字列が入ったり、必須のものが入っていなかったりすることはよくある。だからこそサーバサイドのプログラムでチェックはするのだが、ユーザビリティを考えるとクライアントサイドでも入力チェックを行いたい。

ピクチャ 98.png
リアルタイムで行われる入力チェック

 

入力チェックのJavaScriptを作る、なんていうと面倒な感じがするがVanadiumを使えば開発者の方でなくともチェック機能が実装できてしまう。

今回紹介するオープンソース・ソフトウェアはVanadium、jQueryを使ったクライアントサイド入力チェックライブラリだ。

Vanadiumは入力項目のクラスでチェック内容を指定するようになっている。そのためVanadiumさえ読み込めば、HTMLを変更するだけで入力チェックが実装できるようになる。入力必須や正規表現を使った入力フォーマット指定、数値(整数またはfloat)、最大/最小文字数、入力範囲、規約同意、パスワード(入力確認との一致)、メールアドレスなど。

ピクチャ 100.png
入力が正しいと色を変えることができる

 

さらに入力チェックをJSONで一括指定したり、ユーザ名のようにユニークである必要があるものについてはAjaxを使ってデータを取ることも可能だ。エラーチェックは入力時にリアルタイムに行うのはもちろん、入力が外れた時に実行したり、送信時にのみチェックする指定も可能になっている。

入力チェックがデザイナの方であっても作れてしまうというのは簡単で良い。もちろんサーバサイドでのエラーチェックは欠かせないが、それでもユーザにストレスを感じさせない作りにできそうだ。入力項目が多い画面などで積極的に使いたいライブラリだ。

 

VanadiumJS
 http://vanadiumjs.com/

September 9th, 2009 Posted by admin | コメントはありません

No Comments »

No comments yet.

Leave a comment

MOONGIFTネットワーク。こちらもぜひご覧ください。
MOONGIFT
Open Service
Rails 2.0
Resident on Net
iPhone最適化
リーンソフトウェア
MarketPedia
Producing Web
Cool Coding