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. countdownCube

    JavaScript

    3Dキューブのように回転するカウントダウンタイマーを実装できる「countdownCube」

    countdownCubeは3Dキューブのようにクルッと回転するカウン…

  2. Drooltip.js

    JavaScript

    拡張性の高い美しいツールチップを実装できる「Drooltip.js」

    Drooltip.jsは、美しくパワフルで拡張性の高いツールチップを実…

  3. no-image

    JavaScript

    指定したテキストをハイライトとタイピング効果で表示できる「typeLighter.js」

    typeLighter.jsは、指定したテキストをハイライトとタイピン…

  4. stickUp2

    JavaScript

    スクロールしてもついてくるスティッキー実装「stickUp2」

    stickUp2はスクロールしてもついてくるシンプルなスティッキーを実…

  5. Touch-Tabs-jQuery

    JavaScript

    イベントやカスタマイズが可能な拡張性の高いタブシステム「Touch-Tabs-jQuery」

    Touch-Tabs-jQueryは、イベント設定やカスタマイズが可能…

  6. JavaScript

    レスポンシブなLightbox風のギャラリーを実装できるjQueryプラグイン「anoFlow」

    anoFlowというjQueryプラグインを使えば、レスポンシブなLi…

最近の記事

  1. マリアージュ フレール 紅茶チョコレート
  2. CD-ADE1BK
  3. 渋谷スクランブルスクエアからの夜景
  4. BELTZのバスクチーズケーキ

アーカイブ

PAGE TOP