유군 블로그 - 즐거운 세상

Result

HTML

				<form id="signupform" method="post" action="login_action.php">
					<fieldset>
						<legend>회원가입 폼</legend>
						<p>
							<label for="email">메일주소</label><input type="text" name="email" id="email" class="input" /><span>유효한 이메일을 입력하세요.</span>
						</p>
						<p>
							<label for="password">비밀번호</label><input type="password" name="password" id="password" class="input" /><span>영문과 숫자 조합으로 비밀번호를 입력하세요.</span>
						</p>
						<p>
							<label for="password_re">비밀번호 확인</label><input type="password" name="password_re" id="password_re" class="input" /><span>비밀번호를 한번 더 입력하세요.</span>
						</p>
						<p>
							<input type="submit" value="회원가입" class="button" /><input type="button" value="가입취소" class="button" />
						</p>
					</fieldset>
				</form>
			

CSS

form#signupform { margin: 0; padding: 0; }
form#signupform fieldset { border: 1px solid #CCCCCC; padding: 0 10px;}
form#signupform legend { border: 1px solid #CCCCCC; font-size: 110%; margin: 0 0 0 10px; padding: 5px; }
form#signupform p { padding: 5px 0; }
form#signupform p label { font-weight: bold; }
form#signupform p span { color: #666666; font-size: 11px; padding: 0 0 0 10px; }
form#signupform input.button { font-size: 120%; margin: 0; padding: 8px; }

JQuery

			$(document).ready(function(){
				$("#signupform").submit(function(){
					if($("#email").val()==""){
						alert("메일주소를 입력해주세요.");
						$("#email").focus();
						return false;
					}

					if($("#password").val()==""){
						alert("비밀번호를 입력해주세요.");
						$("#password").focus();
						return false;
					}

					if($("#password_re").val()==""){
						alert("비밀번호를 한번 더 입력해주세요.");
						$("#password_re").focus();
						return false;
					}

					if($("#password").val()!=$("#password_re").val()){
						alert("비밀번호를 한번 더 입력해주세요.");
						$("#password_re").focus();
						return false;
					}
				});
			});