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

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでオブジェクトの型を取得して判定などをしたい場合はjQuery.type()を使う

    jQuery.type(obj)を使えばオブジェクトの型を知ることがで…

  2. Docked Link jQuery Plugin
  3. jquery.enhsplitter

    JavaScript

    コンテンツを分離できるフレーム実装「jquery.enhsplitter」

    jquery.enhsplitterはコンテンツを分離させるフレームを…

  4. no-image

    JavaScript

    円形に広がるメニュー実装「expanding action button」

    expanding action buttonは円形に広がるメニューを…

  5. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

  6. flexible-bootstrap-carousel

最近の記事

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

アーカイブ

PAGE TOP