image.png

아이디 찾기 입력 findId.JSP

<body>
<div id="pwdform">
    <h2>아이디 찾기</h2>

    <form action="${contextPath}/member/checkId.do" method="POST" onsubmit="return valdateForm()">
        <!-- 라디오 버튼 -->
        <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 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>

스크립트

<script>
//공백이면 얼럿
function valdateForm(){
	var MemberName = document.getElementById("memberName").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(memberPhone1 === "" || memberPhone2 === "" || memberPhone3 === "") {
		alert("휴대전화를 입력해주세요.");
		document.getElementById("memberPhone1").focus();  //memberPhone1에 포커스띄움
		return false;
	}
}
</script>