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

    JavaScript

    スクロールに連動するプログレスバーを実装できる「Scrollgress」

    Scrollgressはスクロールに連動するシンプルで軽量なプログレス…

  2. jQuery Autocompleter

    JavaScript

    カスタマイズ性に優れたサジェスト機能を実装できる「jQuery Autocompleter」

    jQuery Autocompleterはカスタマイズ性に優れたサジェ…

  3. no-image
  4. Material ScrollTop Button
  5. Simple button checks

    JavaScript

    カスタマイズ可能なチェックボックスを実装できる「Simple button checks」

    Simple button checksはカスタマイズ可能なチェックボ…

  6. jQuery Responsive Thumbnail Gallery Plugin

    JavaScript

    レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQuery Responsive T…

    レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQue…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP