비밀번호 노티 수정

src/main/webapp/WEB-INF/views/web/customer/JoinFormWeb.html

@@ -38,7 +38,7 @@
 					<div class="form_field">
 						<label class="input_label sr-only">아이디</label>
 						<div class="input_wrap form_full">
-							<input type="text" id="custId" name="custId" placeholder="아이디" class="form_control" required="required" data-valid-type="alphaNumeric" data-valid-name="아이디"/><!-- class "usable" 추가 --> <!-- 잘못기입된 경우 class "err" 추가 -->
+							<input type="text" id="custId" name="custId" placeholder="아이디 (4~12자)" class="form_control" required="required" data-valid-type="alphaNumeric" data-valid-name="아이디" minlength="4" maxlength="12"/>
 							<span class="usable" style="display:block;"></span><!-- display:block / display:none 으로 control -->
 						</div>
 						<div id="dupCustIdDiv" class="help_block hide">
@@ -81,7 +81,7 @@
 					<div class="form_field">
 						<label class="input_label sr-only">비밀번호 확인</label>
 						<div class="input_wrap form_full">
-							<input type="password" id="confirmPassword" name="confirmPassword" placeholder="비밀번호 확인" class="form_control" ><!-- 잘못기입된 경우 class "err" 추가 -->
+							<input type="password" id="confirmPassword" name="confirmPassword" placeholder="비밀번호 확인" class="form_control" minlength="8" maxlength="20" required="required" data-valid-name="비밀번호"/><!-- 잘못기입된 경우 class "err" 추가 -->
 							<!-- case (비밀번호확인 틀렸을경우,비밀번호 일치할경우) -->
 							<div class="help_block">
 								<!-- 비밀번호확인 틀렸을경우 -->
@@ -101,7 +101,7 @@
 					<div class="form_field">
 						<label class="input_label sr-only">이메일</label>
 						<div class="input_wrap form_full">
-							<input type="text" id="email" name="email" placeholder="이메일" class="form_control"/><!-- 잘못기입된 경우 class "err" 추가 -->
+							<input type="text" id="email" name="email" placeholder="이메일" class="form_control" maxlength="30"/><!-- 잘못기입된 경우 class "err" 추가 -->
 							<!-- case (이메일 형식이 바르지않을경우,이미 가입되어있는 이메일인경우) -->
 							<div class="help_block">
 								<!-- 이메일 형식이 바르지않을경우 -->
@@ -129,7 +129,7 @@
 					<div class="form_field">
 						<label class="input_label sr-only">휴대폰번호</label>
 						<div class="input_wrap form_full">
-							<input type="text" name="userTell" placeholder="휴대폰번호" class="form_control" id="txtTell">
+							<input type="text" id="cellPhnno" name="cellPhnno" placeholder="휴대폰번호" class="form_control"/>
 							<!-- case (휴대폰번호 형식이 맞지 않을경우,이미 가입되어있는 핸드폰번호일경우) -->
 							<div class="help_block">
 								<!-- 휴대폰번호 형식이 맞지 않을경우 -->
@@ -138,7 +138,9 @@
 								<!-- 이미 가입되어있는 핸드폰번호일경우 -->
 								<p class="t_err">I***D로 가입된 핸드폰 번호 입니다.</p>
 								<div class="mt20">
-									<button type="button" class="btn btn_default btn_sm"><span>휴대폰 인증</span></button>
+									<button type="button" class="btn btn_default btn_sm">
+										<span>휴대폰 인증</span>
+									</button>
 								</div>
 								<!-- //이미 가입되어있는 핸드폰번호일경우 -->
 							</div>
@@ -150,8 +152,8 @@
 					</div>
 					<div class="desc_wrap t_c mt20">
 						<p>
-							본인은&nbsp;만 14세 이상이며&nbsp;<a href="" target="_blank">STYLE24이용약관<i class="ico ico_blank ml5"></i></a>,&nbsp;<a href="" target="_blank">개인정보 수집 및 이용<i class="ico ico_blank ml5"></i></a>,<br>
-							<a href="" target="_blank">개인정보 취급 위탁<i class="ico ico_blank ml5"></i></a> 내용을 확인 하였으며,동의합니다.
+							본인은&nbsp;만 14세 이상이며&nbsp;<a href="javascript:void(0)" target="_blank">STYLE24이용약관<i class="ico ico_blank ml5"></i></a>,&nbsp;<a href="javascript:void(0)" target="_blank">개인정보 수집 및 이용<i class="ico ico_blank ml5"></i></a>,<br>
+							<a href="javascript:void(0)" target="_blank">개인정보 취급 위탁<i class="ico ico_blank ml5"></i></a> 내용을 확인 하였으며,동의합니다.
 						</p>
 					</div>
 				</form>
@@ -177,13 +179,27 @@
 	});
 
 	var fnIdConfirmCallBack = function (result) {
-		let $dupCustIdDiv = $('dupCustIdDiv');
 		if (result.isFind) { // 중복된 아이디가 존재
-			$dupCustIdDiv.show();
+			fnDisplayCustIdDiv(false);
 		} else {
+			fnDisplayCustIdDiv(true);
+		}
+	};
 
+	var fnDisplayCustIdDiv = function (bool) {
+		let $dupCustIdDiv = $('#dupCustIdDiv');
+		let $custId = $('#custId');
+		if (bool) { // 사용가능
+			$custId.removeClass('err'); //잘못기입된 경우
+			$custId.addClass('usable');
+			$('.usable').show();
+		} else {  // 사용가능 하지 않음
+			$custId.addClass('err'); //잘못기입된 경우
+			$custId.removeClass('usable');
+			$dupCustIdDiv.show();
+			$('.usable').hide();
 		}
-	}
+	};
 
 /*]]>*/
 </script>

src/main/webapp/WEB-INF/views/web/customer/PasswordChangeFormWeb.html

@@ -43,15 +43,15 @@
 								<input type="password" id="passwd" name="passwd" placeholder="신규 비밀번호" minlength="8" maxlength="20"/>
 								<!-- case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
 								<div class="help_block">
-									<!-- 사용불가 비밀번호일경우 -->
+									<!-- 사용불가 비밀번호일경우 c_gray c_black2 c_red2-->
 									<p class="mt10">
-										<span id="firstFailed" class="c_black2 hide">
-											<i class="ico ico_check black mr5"></i>영문(대/소문자), 숫자, 특수문자 중 2가지 이상 조합(8~20자) <br/>
+										<span id="firstFailed" class="c_gray">
+											<i class="ico ico_check gray mr5"></i>영문(대/소문자), 숫자, 특수문자 중 2가지 이상 조합(8~20자) <br/>
 										</span>
-										<span id="secondFailed" class="c_red2 hide">
-											<i class="ico ico_check red mr5"></i>4개이상 연속되거나 동일한 문자/숫자 제외 <br/>
+										<span id="secondFailed" class="c_gray">
+											<i class="ico ico_check gray mr5"></i>4개이상 연속되거나 동일한 문자/숫자 제외 <br/>
 										</span>
-										<span id="thirdFailed" class="c_gray hide">
+										<span id="thirdFailed" class="c_gray">
 											<i class="ico ico_check gray mr5"></i>아이디 제외
 										</span>
 									</p>
@@ -128,35 +128,48 @@
 		let $thirdFailed = $('#thirdFailed');
 		let $avlPwd = $('#avlPwd');
 		let pwdCheck = true;
-
+		let red = 'c_red2';
+		let gray = 'c_gray';
 
 		// 영문, 숫자, 특수문자 2종 이상 혼용 || 길이
 		if (fnValidtaionPwdMixedWord(password) || fnValidationPwdLength(password)) {
 			pwdCheck = false;
-			$firstFailed.show();
+			$firstFailed.removeClass(gray);
+			$firstFailed.addClass(red);
 		} else {
-			$firstFailed.hide();
+			$firstFailed.removeClass(red);
+			$firstFailed.addClass(gray);
 		}
 
 		// 동일한 문자/숫자 4자이상 || 연속된 문자가 4자이상
 		if (fnValidationPwdSameWord(password) || fnValidtaionPwdCntnsWord(password)) {
 			pwdCheck = false;
-			$secondFailed.show();
+			$secondFailed.removeClass(gray);
+			$secondFailed.addClass(red);
 		} else {
-			$secondFailed.hide();
+			$secondFailed.removeClass(red);
+			$secondFailed.addClass(gray);
 		}
 
 		// 아이디 포함
 		if (fnValidationPwdSameId(password, custId)) {
 			pwdCheck = false;
-			$thirdFailed.show();
+			$thirdFailed.removeClass(gray);
+			$thirdFailed.addClass(red);
 		} else {
-			$thirdFailed.hide();
+			$thirdFailed.removeClass(red);
+			$thirdFailed.addClass(gray);
 		}
 
 		if (pwdCheck) {
+			$firstFailed.hide();
+			$secondFailed.hide();
+			$thirdFailed.hide();
 			$avlPwd.show();
 		} else {
+			$firstFailed.show();
+			$secondFailed.show();
+			$thirdFailed.show();
 			$avlPwd.hide();
 		}