HTML5 Input要素の入力チェックしてくれるプラグイン「Validatr」を紹介します。
jQueryプラグイン「Validatr」
このプラグインを使えば、「date」「datetime」「email」……といった HTML5 input要素(type)の入力チェックをしれくれます。
フォームにおかしな値を入力するとエラーが表示される!という便利なプラグインです。
それではデモページのフォームを入力してみてください。
「Validatr」のデモ
デモのソース(HTML + jQuery)
< meta name = "description" content = "Validatr のデモでーす。" > |
< title >Validatr - jQueryプラグイン</ title > |
< h1 >Validatr のデモでーす。</ h1 > |
< p >▼「メールアドレス」「日付」を入力し「送信」をクリックしてみてください。</ p > |
< form action = "./demo.html" id = "demo" > |
< label for = "email" >メールアドレス</ label > |
< input type = "email" id = "email" name = "email" required> |
< label for = "date" >日付</ label > |
< input type = "date" id = "date" name = "date" required> |
< input type = "submit" value = "送信" > |
< script charset = "utf-8" src = "http://code.jquery.com/jquery-1.10.1.min.js" ></ script > |
< script charset = "utf-8" src = "validatr.js" ></ script > |
$(document).ready(function(){ |
jsファイルのダウンロード、オプション詳細はこちらからどうぞ。