• かちびと.net

    fieldset要素単位で横スライドするバリデーション付きの入力フォーム用jQueryプラグイン・jQuery Stepyのご紹介。なかなか汎用性が高そうだったのでメモがてらご紹介します。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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要素ごとにスライドします。

画像スライドも


画像にも対応してたり。

なかなか汎用性が高そうな気がします。デモもあるので触ってみては如何でしょう。

jQuery Stepy

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services