ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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


ピクチャ 98.png

リアルタイムで行われる入力チェック

 

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

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


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


ピクチャ 100.png

入力が正しいと色を変えることができる

 

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

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

 

VanadiumJS

 http://vanadiumjs.com/

 

MOONGIFTの関連記事

コメント

  • MOONGIFTプレミアム
  • Mobile Touch