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

    ライトボックスみたいなお洒落なアラートを出してカスタマイズもできるjQuery uLightBox …

    ライトボックスみたいなお洒落なアラートを表示させることができるjQue…

  2. ScrollTrigger

    JavaScript

    スクロールの位置をベースにしたアニメーション「ScrollTrigger」

    ScrollTriggerはユーザーがスクロールする位置をベースにした…

  3. WD_ImageStax

    JavaScript

    山積みされた写真をシャッフルさせるフォトギャラリー「WD_ImageStax」

    WD_ImageStaxは無造作に山積みされた写真をシャッフルさせるフ…

  4. Tippy.js

    JavaScript

    軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」

    Tippy.jsは軽量でありながらも多彩なツールチップを実装することが…

  5. jQuery Notebook
  6. Yamm 3

    JavaScript

    メガメニューをBootstrap3で実装する「Yamm 3」

    Yamm 3はメガメニューをBootstrap3を使って実装することが…

最近の記事

  1. 赤いなつめ
  2. ペーストしてスタイルを合わせる

アーカイブ

PAGE TOP