Validatrは、HTML5のinput属性を用いて検証できるさまざまなフォームを実装することができます。Emailをはじめ、Color、Date、Number、Range、URLと、いろんな各タイプの属性が用意されています。
Validatr
下記のページから、Validatrの実際のデモ動作をチェックできます。
Emailと書かれたボックスに、メールアドレスを入力してSubmitをクリックすると、入力されたデータを元にいろいろと検証されているのが分かると思います。
例えば、メールアドレス内に「@」が入力されていないと、「メールアドレスに「@」を挿入してください……」などといったメッセージが画面に表示されます。ちゃんとしたメールアドレスを入力してSubmitをクリックすると、「Form Valid!」と表示されます。
input要素のtype属性にemailを設定すると、このようにその属性に合わせてしっかりと適切な検証が実行されるという仕組みです。記述するコードやマークアップもシンプルで、とても手軽に使用できそうですね。
また、input要素のtype属性には他にも、Color、Date、Number、Range、URLといったものがあります。各type属性のデモや属性の詳細などは、下記のページからチェックできます。
min、max、date-format、multiple、patternなどなど、各type属性に応じてさまざまな属性が用意されています。
さらに、オプションには、dateFormat、location、position、showall、template、theme、validといった項目のセッティングもできるので、カスタマイズして使いたい人にもうれしいですね。
他にも、メッセージの入力やカスタムテストの実装なんかも可能なので、気になる人はぜひチェックしてみてください。
というわけで、HTML5のinput属性を用いた検証ができる「Validatr」のご紹介でした。Validatrの詳細やダウンロードは、下記からどうぞ。
