Multi-Step-Form-Js

JavaScript

ステップごとにフォームをバリデーションしてくれる「Multi-Step-Form-Js」

Multi-Step-Form-Jsは、jQueryによるステップごとにフォームをバリデーションしてくれる機能を実装することができます。複数のステップごとに、フォームをバリデーションする機能をサイト内に取り入れたいという人は要チェックです。

Multi-Step-Form-Js

デモ

デモページでは、3つのステップが用意されたフォームが表示されます。最初はName、Email、Enter Detailsというボックスに入力するページが表示されます。例えば、ここで何も入力せずに「Next」ボタンをクリックすると、NameとEmailのボックスに赤枠がついて次のステップへいけない仕組みになっています。

ここの2つのボックスが必須入力項目になっていて、これがちゃんと入力されているかどうかを検証してくれるというわけです。

無事に次のステップへ移動すると、今度は国を選んだりセレクトボックスから値を選んだりする画面が表示されます。ここでも同様に、指定された選択肢の中から何かの値を選ばないと次のステップへいけません。

これらをクリアすると、ようやく最後のステップへいけます。最後は、additional Detailsというボックスが必須入力項目になっています。ここに値を入力して「Submit」ボタンを押せばフォームの作業が完了します。

このように各ステップごとにしっかりとバリデーションしてくれるので、ユーザーの入力漏れなどを未然に防ぐことができますね。

というわけで、ステップごとにフォームをバリデーションする機能を実装したい人は、ぜひ「Multi-Step-Form-Js」をチェックしてみてください。

Multi-Step-Form-Js

関連記事

  1. blurify

    JavaScript

    画像にぼかし効果を実装できる軽量のJSライブラリ「blurify」

    blurifyは画像にぼかし効果を実装することができるJSライブラリで…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのbindメソッドとliveメソッドの簡単な違いや使い方

    bindとliveの違いがちょっとわかりずらかったのでまとめてみました…

  3. JavaScript

    jQueryプラグインのレスポンシブなカルーセルのスライダー「Elastislide」を使ってみた

    jQueryプラグインで画面のサイズによってレイアウトを合わせてくれる…

  4. photowall

    JavaScript

    Google画像検索のようにサムネイル画像をクリックするとスライド表示されるjQueryプラグイン「…

    Google画像検索のようなアニメーションを実装することができるjQu…

  5. ptrLight

    JavaScript

    モバイル用のリフレッシュインジケーターを実装できる「ptrLight」

    ptrLightはモバイル用のリフレッシュインジケーターを実装すること…

  6. jQuery Section Navi Plugin

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP