[JS]フォームの入力欄を次々にアニメーションで表示するスクリプト

フォームの項目を入力すると、次の入力欄がアニメーションで表示されるコンテンツを実装するチュートリアルを紹介します。

Gravity Registration Form with Jquery
デモページ

[ad#ad-2]

フォームの出来ぐあいは、ウェブアプリケーションとしての成功率を左右する要因となります。
一つのアプローチとして、ユーザーに入力欄の数を少なく感じられるように、入力する項目を一つずつ表示するスクリプトを紹介します。

フォームの実装

フォームの各項目は、リスト要素で実装しています。

HTML

<form method="post" >
<ul>
<li class="email"><label>Email: </label><br/> <input type="text" username="email" id="email"  AUTOCOMPLETE=OFF/><span class="error"></span></li>
<li class="username"><label>Username: </label><br/> <input type="text" name="name" id="username" AUTOCOMPLETE=OFF/><span class="error"></span></li>
<li class="password"><label>Password: </label><br/> <input type="password" name="password" id="password" AUTOCOMPLETE=OFF/><span class="error"></span></li>
<li class="submit"><input type="submit" value=" Register " id='submit'/></li>
</ul>
</form>

[ad#ad-2]

フォームのスタイリング

フォームのスタイルシートはシンプルです。
注意点は、各項目をデフォルトの状態では、非表示にしていることです。
※個人的には、スタイルシートでは表示にして、スクリプトで非表示が好ましいと思います。

CSS

ul{
	padding:0px;
	margin:0px;
	list-style:none;
}
li{
	padding:5px;
	display:none;
}
label{
	font-size:14px;
	font-weight:bold;
}
input[type="text"], input[type="password"]{
	border:solid 2px #009900;
	font-size:14px;
	padding:4px;
	width:180px;
	-moz-border-radius:6px;-webkit-border-radius:6px;
}
input[type="submit"]{
	border:solid 1px #ff6600;
	background-color:#FF6600;
	color:#fff;
	font-size:14px;
	padding:4px;
	-moz-border-radius:6px;-webkit-border-radius:6px;
}
.error{
	font-size:11px;
	color:#cc0000;
	padding:4px;
}

#form{
	width:350px;
	margin:0 auto;
	margin-top:30px;
}

スクリプトの実装

スクリプトは、jQueryを使用します。
外部ファイルとして、「jquery.js」と「jquery.easing.1.3.js」を指定し、下記のスクリプトを記述します。簡易的に各項目のチェック機能も備わっています。

JavaScript

$(function() {
	$("ul li:first").show();

	var ck_username = /^[A-Za-z0-9_]{3,20}$/;
	var ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i 
	var ck_password =  /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/;

	$('#email').keyup(function(){
		var email=$(this).val();
		if (!ck_email.test(email)){
			$(this).next().show().html("Enter valid email");
		}else{
			$(this).next().hide();
			$("li").next("li.username").slideDown({duration: 'slow',easing: 'easeOutElastic'});
		}
	});

	$('#username').keyup(function(){
		var username=$(this).val();
		if (!ck_username.test(username)){
			$(this).next().show().html("Min 3 charts no Space");
		}else{
			$(this).next().hide();
			$("li").next("li.password").slideDown({duration: 'slow',easing: 'easeOutElastic'});
		}
	});

	$('#password').keyup(function(){
		var password=$(this).val();
		if (!ck_password.test(password)){
			$(this).next().show().html("Min 6 Charts");
		}else{
			$(this).next().hide();
			$("li").next("li.submit").slideDown({duration: 'slow',easing: 'easeOutElastic'});
		}
	});

	$('#submit').click(function(){
		var email=$("#email").val();
		var username=$("#username").val();
		var password=$("#password").val();
		if(ck_email.test(email) && ck_username.test(username) && ck_password.test(password) ){
			$("#form").show().html("<h1>Thank you!</h1>");
		}else{
	}
	return false;
	});
})