Validatr

JavaScript

HTML5のinput属性による検証ができるフォーム実装「Validatr」

Validatrは、HTML5のinput属性を用いて検証できるさまざまなフォームを実装することができます。Emailをはじめ、Color、Date、Number、Range、URLと、いろんな各タイプの属性が用意されています。

Validatr

Home | Validatr

Emailと書かれたボックスに、メールアドレスを入力してSubmitをクリックすると、入力されたデータを元にいろいろと検証されているのが分かると思います。

例えば、メールアドレス内に「@」が入力されていないと、「メールアドレスに「@」を挿入してください……」などといったメッセージが画面に表示されます。ちゃんとしたメールアドレスを入力してSubmitをクリックすると、「Form Valid!」と表示されます。

input要素のtype属性にemailを設定すると、このようにその属性に合わせてしっかりと適切な検証が実行されるという仕組みです。記述するコードやマークアップもシンプルで、とても手軽に使用できそうですね。

Fields | Validatr

min、max、date-format、multiple、patternなどなど、各type属性に応じてさまざまな属性が用意されています。

さらに、オプションには、dateFormat、location、position、showall、template、theme、validといった項目のセッティングもできるので、カスタマイズして使いたい人にもうれしいですね。

他にも、メッセージの入力やカスタムテストの実装なんかも可能なので、気になる人はぜひチェックしてみてください。

Validatr

Lity超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」前のページ

サムネイル画像のギャラリーに最適なコンテンツスライダー「Thumbelina」次のページThumbelina

関連記事

  1. ad-datepicker

    JavaScript

    アクセシブルなデートピッカーを実装できる「ad-datepicker」

    ad-datepickerはアクセシブルなデートピッカーを実装できるj…

  2. Erge Drop Down Menu Control
  3. FlexNav

    JavaScript

    見た目もシンプルでレスポンシブ対応のナビゲーションメニューを実装できるjQueryプラグイン「Fle…

    シンプルなデザインでレスポンシブにも対応したナビゲーションメニューを実…

  4. jquery.square.js

    JavaScript

    スクエアなグリッドレイアウトを実装できる「jquery.square.js」

    jquery.square.jsは、スクエアなグリッドレイアウトを実装…

  5. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

  6. Lightbox

    JavaScript

    jQuery依存なしのシンプルなライトボックス機能を実装できる「Lightbox」

    LightboxはjQueryに依存することなくシンプルなライトボック…

最近の記事

  1. ゴムの耳栓
  2. ライオンコーヒー(バニラマカダミア)
PAGE TOP