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. Data Img

    JavaScript

    ブラウザ幅に応じて画像を切り替えれるレスポンシブ対応のjQueryプラグイン「Data Img」

    Data Imgはブラウザ幅に応じて最適なサイズの画像を切り替えて表示…

  2. Jquery progress indicator on page scroll
  3. swipe-menu-js

    JavaScript

    横からスライド・スワイプ表示するハンバーガーメニュー実装「swipe-menu-js」

    swipe-menu-jsは横からスライド・スワイプ表示するシンプルな…

  4. characterCounter

    JavaScript

    文字数のカウントや制限ができるjQueryプラグイン「characterCounter」

    characterCounterは文字数をカウントしてくれるシンプルな…

  5. HCaptions

    JavaScript

    ホバー時に色々なエフェクトでキャプションをオーバーレイ表示できるjQueryプラグイン「HCapti…

    指定した要素をホバーすると色々なエフェクトでキャプションをオーバーレイ…

  6. Huebee

    JavaScript

    オシャレなカラーピッカーを手軽に表示させれる「Huebee」

    Huebeeはシンプルでオシャレなカラーピッカーを手軽に表示させること…

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP