jQueryを使って簡単にフォームの入力チェックができる「jQuery Inline Form Validation Engine」

Posted at 02:24 on June 4, 2009

Last updated at 23:48 on June 2, 2010

Category: News, Note

Tags: JavaScript, jQuery, Web, ツール, ライフハック

（クリックで拡大表示）

» MOONGIFT: » jQueryでその場で入力チェックを行う「jQuery Inline Form Validation Engine」:オープンソースを毎日紹介

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

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

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

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

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

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

これは便利ですね！

フォームの入力チェックを０から実装しようと思うとなかなか面倒ですからね（その道のプロや JavaScript に詳しい人なんかにとっては朝飯前なのかもしれませんが……）。僕みたいな文系ウェブマスターなんかにはぴったりだと思いますｗ

▲上に戻る▲