validity


Description: 軽量なフォームバリデーションを実装するプラグイン。クロスブラウザにも対応しており、送信ボタンを押すと指定する仕組みになっています。
Sample: demo
Tutorial: jQuery.validity Get validation right, the first time.
License: -

Note

$(function() {
                $("form").validity(function() {
                    $("#vehicles")
                        .require()
                        .match("number")
                        .range("4", "12");

                    $("#dob")
                        .require()
                        .match("date")
                        .lessThanOrEqualTo(new Date());
                });
            });

jQueryとプラグインを読み込んで上記設定でOK。

バリデーションテキストはプラグインファイルの69行目あたりの以下の部分に変更を加えます

  require:"#{field} is required.",
            // Format validators:
            match:"#{field} is in an invalid format.",
            integer:"#{field} must be a positive, whole number.",
            date:"#{field} must be formatted as a date.",
            email:"#{field} must be formatted as an email.",
            usd:"#{field} must be formatted as a US Dollar amount.",
            url:"#{field} must be formatted as a URL.",
            number:"#{field} must be formatted as a number.",
            zip:"#{field} must be formatted as a zipcode ##### or #####-####.",
            phone:"#{field} must be formatted as a phone number ###-###-####.",
            guid:"#{field} must be formatted as a guid like {3F2504E0-4F89-11D3-9A0C-0305E82C3301}.",
            time24:"#{field} must be formatted as a 24 hour time: 23:00.",
            time12:"#{field} must be formatted as a 12 hour time: 12:00 AM/PM",

Related snippet :

  • Description: 要素がフリップ(ひっくり返す)するWebギャラリーです。縦や横に対応します。クロスブラウザ対応でとてもシンプルなので汎用的に使えそうですね。 ...
  • Description: 大量の要素に対して、指定方向へ順番にフェードを適用させ、ユニークなアニメーションコンテンツを実装します。個人的には若干鬱陶しくなりそうな気がしますが ...
  • Description: フォームがアクティブの時にラベルを外にスライドさせます。通常はアクティブ時に消えますが、外にだすことで、入力補助になりそうです。クロスブラウザにも対 ...
  • Description: カメラのシャッターのようなエフェクトで画像を切り替えるプラグイン。HTML5のcanvasを使っています。凄いですねこれwもちろん、対応ブラウザは限 ...
  • Description: 背景に指定した画像をギャラリーにするプラグインです。IE6でも問題無し。背景指定なので、スライドショーの上に画像やテキストを自由に配置することも可能 ...
  • Description: 全画面をスライドショー化出来るLightbox付きのプラグインです。IE6以外は動作。ダイナミックに表示可能で、動画やフレーム、Flashにも対応で ...
  • Description: canvasを使って小さいグラフをかけるようにするjQueryプラグインです。とっても小さく、span要素で描けるので文中にも入れたり出来ます。 ...