form validation
HTML
<div class="wrap">
<form id="step-verification" class="form" active="" method="post">
<div class="box">
<h1 class="title">인증 절차</h1>
<p class="desc">
안전한 계정 사용을 위해 인증을 사용해 주세요.<br>
인증은 아이디와 비밀번호 외 일회용 인증번호를 입력해야만
로그인 할 수 있는 이중 보안 서비스입니다.<br>
인증에 필요한 이메일을 등록하고 더욱 안전하게 계정을 보호하세요.
</p>
<p class="agree-area">
<input id="agree" type="checkbox" />
<label for="agree">
인증을 위해 개인정보 수집 및 이용에 동의합니다.(필수)
</label>
</p>
</div>
<div class="box">
<h2 class="title">이메일 등록</h2>
<p class="desc">
인증이 가능한 이메일 주소를 입력 후 인증번호 받기를 선택해 주세요.<br>
입력한 이메일 주소로 발송된 인증번호를 입력하고 확인을 선택해 주세요.
</p>
<div class="email-area">
<p>
<label for="email">이메일</label>
<input id="email" type="email" placeholder="이메일을 입력해주세요." />
<button id="send-access-code" type="button">인증번호 받기</button>
</p>
<p>
<label for="email-code">인증번호</label>
<input id="email-code" type="text" placeholder="인증번호 입력(20분 이내)" />
</p>
</div>
</div>
<div>
<button id="prev-page" type="button">이전으로</button>
<button id="submit" type="button">확인</button>
</div>
</form>
</div>
CSS
.wrap{
margin:0 auto;
width:900px;
background-color:#fff;
border:1px solid #c4c4c4;
box-shadow:3px 3px 10px rgba(0,0,0,0.3);
font-size:16px; line-height:22px;
color:#333;
}
.form{
padding:30px;
}
.title{
padding-bottom:20px; border-bottom:1px solid #c4c4c4;
}
.email-area label{
display:block;
}
input[type=text],input[type=email]{
width:50%; height:30px; text-indent:10px;
}
button{
display:inline-block;
height:35px;
background-color:#fff;
border:1px solid #c4c4c4; box-sizing:border-box;
}
button:hover{ background-color:#c4c4c4; color:#fff; }
.error-msg{ margin:0; color:red; font-size:12px; }
JS
var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
// 이전으로 버튼
$('#prev-page').on('click', function(){ history.go(-1) });
// 유효성 검사
$('#send-access-code').on('click', function(){
var $sendButton = $(this);
var target = $(this).siblings('input[type=email]');
accessCodeEmailValidate($sendButton,target);
});
$('#submit').on('click', function(){
var $form = $('#step-verification');
var validationResult = twoStepVaildate($form);
if(validationResult){
alert('성공!');
// $form.submit();
}
});
function accessCodeEmailValidate(triggerBtn,target){
var $target = $(target);
var targetVal = $(target).val();
if(targetVal == ''){
var errorMsg = '이메일 주소를 입력해주세요.';
setErrorMsg($target,errorMsg);
// alert('이메일 주소를 입력해주세요.');
}else if( !reg.test(targetVal.toLowerCase()) ){
var errorMsg = '잘못된 이메일 입니다.';
setErrorMsg($target,errorMsg);
}else{
// api 호출 성공 시 btn 이름 변경
$(k).siblings('#error').hide();
if( $(triggerBtn).val() !== 'resend' ) $(triggerBtn).val('resend').text('인증번호 재발송');
}
}
function setErrorMsg(target,errorMsg){
var $target = $(target);
var $targetParent = $target.parent();
if($targetParent.find('#error').length < 1){
$targetParent.append('<p id="error" class="error-msg">'+ errorMsg +'</p>');
}else{
$targetParent.find('#error').text(errorMsg).show();
}
}
function twoStepVaildate(form){
var validTarget = $(form).find('input');
var failNum = 0;
$.each(validTarget, function(i,k){
// 개인 정보 동의
if(k.type == 'checkbox') {
var result = k.checked == true ? true : false;
if (!result) {
alert('2단계 인증 설정을 위한 개인정보 수집 및 이용에 동의해주세요.');
failNum = failNum + 1;
}
}else if(k.type == 'text'){
if(k.value == '') {
failNum = failNum + 1;
// error
var errorMsg = '인증번호를 입력해 주세요.';
setErrorMsg(k,errorMsg);
}else{
$(k).siblings('#error').hide();
}
}else if(k.type == 'email'){
if(k.value == '') {
failNum = failNum + 1;
// error
var errorMsg = '이메일 주소를 입력해주세요.';
setErrorMsg(k,errorMsg);
}else{
if( !reg.test(k.value.toLowerCase()) ){
failNum = failNum + 1;
var errorMsg = '잘못된 이메일 입니다.';
setErrorMsg(k,errorMsg);
// error
}else{
$(k).siblings('#error').hide();
}
}
}
});
if(failNum > 0) return false;
else return true;
}
