Guardian

JavaScript

フォームにバリデーションを実装できるjQueryプラグイン「Guardian」

Guardianはフォームにバリデーション機能を実装することができるjQueryプラグインです。フォーム内が空の時や間違った情報を入力している時にはエラーメッセージを表示させたりすることも可能です。

[ads_center]

Guardian

Guardian

Guardian

以下はベーシックなスタイルのバリデーション。

ベーシックなスタイル

空欄時や誤った情報の入力時には、こんな感じでエラーメッセージを出すこともできます。

エラーメッセージ

ボックス枠もエラーの時は赤で囲まれて正しい入力値の場合は緑で囲まれるので、瞬時に正否を判断できるのがいいですね。

デザインもスッキリしていて見やすいです。というわけで、jQueryを使ってフォーム入力でバリデーションを行うことができるGuardianのご紹介でした。

クリックで画像や要素にオーバーレイを表示させるjQueryプラグイン「Purplecoat.js」前のページ

カスタマイズ性が高いシンプルなモーダルウィンドウのjQueryプラグイン「plainModal」次のページplainModal

関連記事

  1. JavaScript

    とても簡単で軽量なjQueryスライダー「jQuery Slider²」を使ってみる

    とても簡単かつ軽量なjQueryのスライダー「jQuery Slide…

  2. no-image

    JavaScript

    シンプルでベーシックなJavaScriptによるlightbox実装「halkaBox.js」

    halkaBox.jsは、シンプルでベーシックなJavaScriptに…

  3. mFancyTitle

    JavaScript

    ブラウザのタブにあるファビコンとタイトルをアニメーション化できる「mFancyTitle」

    mFancyTitleは、ブラウザのタブに表示されているファビコンとタ…

  4. autoscroll.js

    JavaScript

    コンテンツを自動でスクロールしてくれるjQueryプラグイン「autoscroll.js」

    autoscroll.jsはwebページ内のコンテンツを自動でスクロー…

  5. no-image

    JavaScript

    コンテナのサイズに合わせて要素を動的に拡大・縮小できる「Scalable」

    Scalableは、コンテナ領域内にある要素をコンテナのサイズに合わせ…

  6. Responsive Nav

    JavaScript

    レスポンシブ対応の軽量なナビゲーションを実装できる「Responsive Nav」

    レスポンシブ対応のナビゲーションを実装できる「Responsive N…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP