jQueryでその場で入力チェックを行う「jQuery Inline Form Validation Engine」

2009/06/02

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

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

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

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

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

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

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

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

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

MOONGIFTの関連記事