fieldset要素単位で横スライドするバリデーション付きの入力フォーム用jQueryプラグイン・jQuery Stepy

縦長になるような入力フォームにいいかな
と思ってメモ。fieldsetでグループ化された
要素単位でスライド化してくれます。下部
までスクロールする必要が無くなるのと、
どこが誤入力か分かりやすい、場所を取ら
ないなどのメリットがあります。

特に、入力項目が長いフォームは離脱率を高くする可能性も否めませんので、入力プロセスを補助するのはユーザビリティに大きく貢献出来るかと思います。IE6でも7でも動作するようです。

jQuery Stepy

日本語に直してみました。これは1例で、3つに分けなければならないわけではありません。

入力をミスすると、次のfieldset要素に進めない（スライドできない）という仕組み。

fieldsetごとにバリデーションチェックを行うのでユーザーもストレスが無いような~~有るような~~。
うん、ストレス無いです。（ｷﾘｯ

ファイルとか

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="jquery.validate.min.js"></script>
		<script type="text/javascript" src="jquery.stepy.min.js"></script>

本体とプラグインファイルをセットします。

エラーメッセージ

スライド部分

				$('#custom').stepy({
					backLabel:	'戻る',
					block:		true,
					errorImage:	true,
					nextLabel:	'次に進む',
					titleClick:	true,
					validate:	true
				});

チェック項目とエラーメッセージもここで設定

					rules: {
						'email':	'email',
						'bio':		'required',
						'password':	'required',
						'day':		'required',
						'gender':	'required'
					},
					messages: {
						'email':	{email: 'メールアドレスじゃねーし！'},
						'bio':		{required: '君のこと、もっと知りたいんだ'},
						'password':	{required: 'まだパスワード入れてないよ'},
						'day':		{required: '日付まだっす！'},
						'gender':	{required: '性別！性別教えて！'}
					}

メッセージ変えてくださいね。

マークアップ

<form id="custom">
				<fieldset title="STEP1">
					<legend>名前やメール</legend>
					<label>User:</label> <input type="text" value="かちびと" size="40" disabled="disabled"/>
					<label>E-mail:</label> <input type="text" name="email" size="40"/>
					<label>Password:</label> <input type="password" name="password" size="40"/>
				</fieldset>
	
				<fieldset title="2つ目のグループ">
					<legend>ニックネームとか</legend>
					<label>あだ名:</label> <input type="text" name="nick" size="30"/>
					<label>君のこと:</label> <textarea name="bio" rows="5" cols="60"></textarea>
				</fieldset>
	
				<fieldset title="これで最後">
					<legend>誕生日とか教えてちょ</legend>
					<input type="hidden"/> <!-- Hidden fields are not focused.  -->
					<label>誕生日:</label>
					<select name="day">
						<option></option>
						<option>23</option>
						<option>24</option>
						<option>25</option>
					</select>
					<select>
						<option>10</option>
						<option>11</option>
						<option>12</option>
					</select>
					<select>
						<option>1984</option>
						<option>1983</option>
						<option>1982</option>
					</select>
					<label>性別:</label>
					<input type="radio" name="gender"/> 男性
					<input type="radio" name="gender"/> 女性
					<label>Site:</label> <input type="text" name="site" size="40"/>
				</fieldset>
	
				<input type="submit" class="finish" value="登録！"/>
			</form>

こんな感じでマークアップ。fieldset要素ごとにスライドします。