h5Validate

JavaScript

HTML5のフォームバリデーションを実装できるjQueryプラグイン「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

Animated Image Pieces画像が細かいピースになるアニメーション実装「Animated Image Pieces」前のページ

豊富なアニメーションでカスタマイズ性に優れたスライドショーを実装できる「Skitter」次のページSkitter

最近の記事

  1. CIO Mate Magnet Stand
  2. 抹茶クリームドーナツ
  3. FAST
  4. クリスマスブレンド
  5. ホワイトチョコマカダミアドーナツ
PAGE TOP