image.png

비밀번호 찾기 findPw.jsp

<script>

//공백이면 얼럿
function valdateForm(){
	var memberName = document.getElementById("memberName").value.trim();
	var memberId = document.getElementById("memberId").value.trim();
	var memberPhone1 = document.getElementById("memberPhone1").value.trim();
	var memberPhone2 = document.getElementById("memberPhone2").value.trim();
	var memberPhone3 = document.getElementById("memberPhone3").value.trim();
	
	if(memberName === "") {
		alert("이름을 입력해주세요.");
		document.getElementById("memberName").focus();    //memberName에 포커스
		return false;
	}
	if(memberId === "") {
		alert("아이디를 입력해주세요.");
		document.getElementById("memberId").focus();    //memberId에 포커스
		return false;
	}
	if(memberPhone1 === "" || memberPhone2 === "" || memberPhone3 === "") {
		alert("휴대전화를 입력해주세요.");
		document.getElementById("memberPhone1").focus();  //memberPhone1에 포커스띄움
		return false;
	}
	
	  console.log("폼 제출 성공"); // 폼이 정상적으로 제출될 때 로그 출력
	    return true;
	
}

//조회 후 null이나 공백이면 alert띄우기
window.onload =function() {
	var errorMsg ="${error}"; //컨트롤러에서 전달된 메시지
	if(errorMsg && errorMsg !="") {
		alert(errorMsg);
	}
};

//입력한 멤버 아이디를 히든으로 넣기
//document.getElementById("memberId").addEventLisnner("input", function() {
//document.getElementById("memberId").value = this.value;
//});
</script>

<body>
<div id="pwdform">
    <h2>비밀번호 찾기</h2>
        <!-- 라디오 버튼 -->
    	<form action="${contextPath}/member/findPwSearch.do" method="POST" onsubmit="return valdateForm()">
    	<!-- <input type="hidden" name="memberId" id="memberId" value="memberId"/> --> <!-- 입력한 멤버아이디를 히든으로 넣기 -->
    	
        <div class="radio-group">
            <input type="radio" value="phone" checked> 
            <label for="phone">회원정보에 등록한 휴대전화로 인증</label>
        </div>

        <!-- 이름 입력 -->
        <div class="input-group">
            <label for="memberName">이름</label><br>
            <input type="text" name="memberName" id="memberName" />
        </div>
        
        <!-- 아이디 입력 -->
        <div class="input-group">
            <label for="memberId">아이디</label><br>
            <input type="text" name="memberId" id="memberId" />
        </div>

        <!-- 핸드폰 번호 입력 -->
        <div class="input-group phone-input-group">
            <label for="memberPhone">휴대전화</label><br>
            <input type="text" name="memberPhone1" id="memberPhone1" maxlength="3" /> -
            <input type="text" name="memberPhone2" id="memberPhone2" maxlength="4" /> -
            <input type="text" name="memberPhone3" id="memberPhone3" maxlength="4" />
        </div>

        <!-- 인증번호 받기 버튼과 추가 입력칸 -->
		<div class="input-group-with-button">
		    <input type="text" name="authCode" id="authCode" placeholder="인증번호 6자리 숫자 입력" />
		    <button type="button" id="authBtn">인증번호 받기</button>
		</div>

        <!-- 확인 버튼 -->
        <button type="submit" id="btn">확인</button>
    </form>
</div>
</body>

style

<style>
        body {
            overflow: hidden;
            height: 100vh;
            font-family: Arial, sans-serif;
        }

        input {
            width: 280px;  /* 동일한 크기로 설정 */
            height: 30px;  /* 크기 일치 */
            padding: 5px;
            margin: 5px 0;
        }

#pwdform {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: left;
    margin: auto;
    padding: 20px; /* 왼쪽 짤림 방지용 */
    box-sizing: border-box;
    max-width: 400px;
    width: 100%;
}

#btn, #authBtn {
    background-color: #DE6963;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}
/* 확인 버튼 */
#btn {
    width: 300px;
    height: 40px;
    margin-top: 10px;
}
/* 인증번호받기 버튼 */
#authBtn {
    width: 120px;
    height: 40px;
}
#btn:hover,
#authBtn:hover {
    background-color: #f18a84;
}

        .input-group {
            margin-bottom: 15px;
        }

        label {
            font-size: 16px;
            margin-bottom: 5px;
        }

        .phone-input-group input {
            width: 74px; /* 핸드폰 번호 입력 필드 크기 조정 */
            display: inline-block;
        }

        .radio-group {
            margin-bottom: 20px;
            display: flex;
            justify-content: left; /* 중앙 정렬 */
            align-items: center;
        }

        .radio-group input[type="radio"] {
            width: 15px;  /* 라디오 버튼의 크기를 줄임 */
            height: 15px; /* 라디오 버튼의 크기를 줄임 */
            margin-right: 10px; /* 라디오 버튼과 텍스트 간의 간격 */
        }

        /* 인증번호 받기 버튼과 추가 인풋 필드 배치 */
        .input-group-with-button {
            display: flex;
            gap: 10px; /* input과 버튼 사이 여백 */
            align-items: center;
            margin-bottom: 15px;
        }

        .input-group-with-button input {
            width: 150px; /* 인풋 칸의 크기를 성함 입력과 비슷하게 설정 */
        }

        .input-group-with-button button {
            width: 120px; /* 인증번호 받기 버튼의 너비 설정 */
        }

    </style>