HTML5のフォームバリデーションを実装できるjQueryプラグイン「h5Validate」

h5Validate

h5ValidateはHTML5によるフォームバリデーションを実装することができるjQueryプラグインです。すべての主要なブラウザで動作するのがいいですね。Eコマース用に開発されたとのこと。

h5Validate

デモ

デモページには、いくつかのサンプルが設置されています。例えば、Features内の一番上にあるYour Nameと書かれた場所にあるテキストボックスを空欄のままにして「Submit」ボタンを押すと、「このフィールドを入力してください。」というメッセージが表示されます。

テキストボックスが空欄になっているか、もしくは文字が入力されているかを検証してくれます。

また、その下にあるYour Birth Dateのテキストボックスでは、mm/dd/yyyyという形式が指定されています。なので、この形式以外で入力してenterキーを押すと、「指定されている形式で入力してください。」というメッセージが表示されます。

入力された文字が指定された形式になっているか否かを検証してくれるというわけです。

このように、フォーム内に入力されたデータを検証して間違っている場合はメッセージも表示させることができるので、間違いを事前に防ぐことができます。これならユーザーにとっても安心してフォームに入力できますね。

email、phone、url、number……など、いろんなパターンで活用できます。

さらに、h5Validateにはオプションもいろいろ用意されています。主なオプションは、errorClass、validClass、errorAttribute、kbSelectors、focusout、focusin、change、keyup、clickです。

サポートされているプラットフォームは、IE 9、8、7、6、Chrome、Firefox、Safari、Opera。それから、Windows 7、Mac、iPhone、Androidでテスト済みとのこと。

h5Validate

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives