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

関連記事

  1. Image Tilt Effect

    JavaScript

    画像にチルトエフェクトをかけることができる「Image Tilt Effect」

    Image Tilt Effectは画像にチルトエフェクトをかけたちょ…

  2. PleaseWait

    JavaScript

    ローディングアイコンをオシャレに実装することができる「PleaseWait」

    PleaseWaitはローディングアイコンをオシャレに見せることができ…

  3. Reframe.js

    JavaScript

    特定の要素をレスポンシブ化してくれる「Reframe.js」

    Reframe.jsはレスポンシブに対応していない特定の要素をレスポン…

  4. Progressively

    JavaScript

    画像を徐々に読み込んでくれるJSライブラリ「Progressively」

    Progressivelyは画像を徐々に読み込ませることができるJSラ…

  5. jQuery Slideshow

    JavaScript

    シンプル・軽量・レスポンシブなスライダー実装「jQuery Slideshow」

    jQuery Slideshowはシンプルで軽量、そしてレスポンシブに…

  6. no-image

    JavaScript

    リッチキャプションを備えたイメージビューア「CaptionBox」

    CaptionBoxは、リッチキャプションを備えた美しいイメージビュー…

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP