Guardian

JavaScript

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

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

[ads_center]

Guardian

Guardian

Guardian

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

ベーシックなスタイル

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

エラーメッセージ

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

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

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

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

関連記事

  1. JavaScript

    中心から外側に広がっていくエフェクトのjQueryプラグイン「jQuery.twinkle」

    jQuery.twinkleというjQueryプラグインを使えば、中心…

  2. Custom jQuery Lightbox

    JavaScript

    デザインや使い方がシンプルな「Custom jQuery Lightbox」

    Custom jQuery Lightboxはデザインや使い方がシンプ…

  3. BigText

    JavaScript

    テキストを指定した幅にフィットさせるjQueryプラグイン「BigText」

    BigTextは、テキストの行を、指定した幅にフィットさせるために必要…

  4. FlexNav

    JavaScript

    見た目もシンプルでレスポンシブ対応のナビゲーションメニューを実装できるjQueryプラグイン「Fle…

    シンプルなデザインでレスポンシブにも対応したナビゲーションメニューを実…

  5. t.js

    JavaScript

    タイプライターで文字を入力するようなテキストエフェクトのjQueryプラグイン「t.js」

    t.jsというjQueryプラグインを使えば、タイプライターで文字を入…

  6. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

最近の記事

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

アーカイブ

PAGE TOP