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

入力された値の検証は最終的にサーバ側で行わなければ意味がない。が、ユーザビリティを考えるとブラウザ上でチェックし、通知できれば便利に違いない。問題はそうしたチェック機能を実装するのが手間だと言うことだ。


ピクチャ 4.png

jQueryを使ってWebブラウザ上で入力チェック

 

動的なフォーム生成でも柔軟に対応できるくらいシンプルな入力チェックライブラリがjQuery Inline Form Validation Engineだ。

今回紹介するオープンソース・ソフトウェアはjQuery Inline Form Validation Engine、jQueryプラグインで提供される入力チェックライブラリだ。

jQuery Inline Form Validation Engineの良い点は、入力チェックがブラウザ上で行われ、かつそのエラー内容が入力項目の横にフローティングで表示される所だ。吹き出し風になっており、非常に分かりやすい。フォーカスが外れた時にチェックが行われるようだ。


ピクチャ 6.png

様々な入力チェックが可能

 

入力チェックの指定はclassを使って行う。例えば「class="validate[required,custom[onlyLetter],length[0,100]] text-input"」のような具合だ。複数の入力チェックを指定することができる。

チェックボックスの必須チェックや、パスワードの一致チェック、メールアドレス検証(簡単なものだろうが)なども用意されている。利用規約への同意チェックなんてまさにぴったりな使い方だろう。

入力エラーのある状態でフォームを送信しようとすると、エラーのある一番上の入力項目まで画面がスライドしていく。これならばユーザへのストレスは大きくなさそうだ。jQueryを利用したWebシステム開発で便利に使えそうだ。

 

A jQuery inline form validation, because validation is a mess « Position Absolute

 http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

Jquery Inline Form Validation Engine

 http://www.position-relative.net/creation/formValidator/


 

MOONGIFTの関連記事

コメント

  • MOONGIFTプレミアム
  • Mobile Touch