jQuery SmartWizard4でウィザード形式ぽいフォームを作る

SmartWizard4でウィザード形式みたいな入力フォームを作る

背景

項目の多いWeb入力フォームを作っていて、見通しが悪いという意見があったのでWindowsとかでよくあるウィザード形式でカテゴリ別にぼちぼちと入力していくようにしたかった。
ググるとjQueryを使ったライブラリがいくつかあるけど、デモをみるとテーマを切り替えられたりできて見栄えもいいjQuery Smart Wizardを選定…したのだが、よくあるバージョン間の断絶的な罠があったのでメモ的に。

前提ライブラリ

2017.5.1現在、npmで入れた時点のもの。

• jQuery : 3.3.1
• Bootstrap : 4.1.1
• BootstrapValidator: 0.11.9
• SmartWizard : 4.3.1

SmartWizardについてはドキュメント等検索するとけっこうhitするもののSmartWizard3を前提とされているものも、バージョンがかかれていないときがあるので注意が必要。

インストール

雑だけどザックリと。

npm install jquery bootstrap bootstrap-validator smartwizard

使う

基本的な部分はExampleがしっかりしてる。
そして詳しい部分は 公式ドキュメント をあたるの
が一番なのだが、なぜかpublic methodの記述がなくeventとparameterのことだけでコメント欄も困ってる感。

つたないJavascript力でなんとか読み解くと、ページ遷移についてBootstrapValidatorのエラー有無に頼ってる。
逆にいえばそのあたりの使い方はBootstrapValidatorの流儀におまかせ。

基本設定した部分

デフォルトだとカーソルキーの左右でステップ状態の移動ができてしまうので、keyNavigationをfalseにした。
また前後のボタンは日本語にしようとしたところ、SmartWizard3と記述方法がかわっているので、下記のとおりに。

javascript

$('#smartwizard').smartWizard({
 selected: 0,
 keyNavigation: false,     // カーソルキー左右でステップを移動しないように 
 theme: 'arrows',
 transitionEffect: 'fade', // fade か slide が選べる
 lang: {
  next: "次へ",            // Nextボタンの表面
  previous: '戻る'         // Prevボタンの表面
 },
 toolbarSettings: {
  toolbarPosition: 'bottom'
 }
});

ちなみにSmartWizard3だとパラメータで下記のとおり設定していた様子。

javascript

//古い書き方
    labelNext:'Next', // label for Next button
    labelPrevious:'Previous', // label for Previous button

別の関数からステップを遷移させる

前述のPublic Methodだが、ソースを読むと書いてある。
SmartWizard3でいうところの goForward() 等にあたる（とおもわれる）

javascript

//$("#smartwizard").smartWizard(メソッド名);

$("#smartwizard").smartWizard('next'); //次のステップに移動
$("#smartwizard").smartWizard('prev'); //前のステップに戻る
$("#smartwizard").smartWizard('reset'); //ステップをリセット
$("#smartwizard").smartWizard('theme', 'dots'); //テーマを切り替える

というわけで、何らかの入力をうけて当該ステップから次に移るには下記のようにする。

javascript

$("#hoge_button").on('click', function(){
  $("#smartwizard").smartWizard('next');
});

validation結果を反映してくれるので、強制的に次ステップに移行するわけではないので安心。