[jQuery] 아이디 중복검사 했는지 안했는지 확인하기

❗ 아이디 중복체크기능까지 겨우 만들었는데 이제 사용자가 그 중복체크를 했는지 안했는지 유효성검사도 해야겠쥬??

 

 

🔍 해결방법

---

1. html에 작성한다.

  <div class="form-group">
	    <label for="exampleInputEmail1">아이디</label>
	    <input class="form-control" id="id" name="u_id" placeholder="한글 외 5자리 이상 아이디을 입력하세요">
        <p id="idcheck_ok" ></p> // 아이디 중복체크 후 안내문구 나오게 하는 곳
        <input type="hidden" id="idcheck_ok2" value=""> // 중복체크가 완료됬는지 확인 하는 곳
	    <button type="button" id="idChk">중복확인</button>
	    <p id="notice"></p>
</div>

2. JavaScript에 중복체크 확인과 확인했는지 확인하기위한 코드를 작성한다.

 	$("#idChk").click(function() {
    		
    		let u_id = $("#id").val();
            // 빈 값입력시 입력해달라고 안내하기
    		if(u_id == "") {
    			alert("아이디를 입력해주세요.")
    			return false;
    		}
    		
    		$.ajax({
    			url : "idcheck.do?u_id="+u_id,
                type : 'GET',
                dataType : 'html',
                success : function(data) {
                	if (data == "1") {
                		$("#notice").text("사용가능한 아이디입니다.");
                		$("#notice").css("color","blue");
                		$('#pw').focus();
                		$('#idcheck_ok').text("중복체크✔"); // "idcheck_ok"에 중복체크 안내문 띄어주기
                		$('#idcheck_ok2').val("중복체크"); // "idcheck_ok2"에 "중복체크"라는 값 넣어주기
                		console.log($('#idcheck_ok2').val());

                	} else {
                    // 아래 코드2줄은 사용자가 중복체크 하고도 다른 아이디값으로 다시 중복체크 할 수 있음으로
                		$('#idcheck_ok').text("") // "idcheck_ok"에 안내문 지우기
                		$('#idcheck_ok2').val("") // "idcheck_ok2"에 ""라는 값 넣어주기
                		console.log($('#idcheck_ok2').val());
                		$("#notice").text("아이디가 존재합니다.다른 아이디를 입력해주세요.")
                		$("#notice").css("color","red")
                		$('#id').empty();
                	}
                }
    		})
    	})

3. JavaScript에 form 제출시 유효성 검사를 할 수있게 한다.

    let idcheck = document.getElementById('idcheck_ok2');
    let numcheck = document.getElementById('numcheck_ok2');
    	
        //idcheck의 값이 공백이라면 alert로 안내
        if(idcheck.value == "") {
    	alert("아이디 중복체크를 해주세요")
    	id.focus();
    	return false;
    	}
        //numcheck 값이 공백이라면 alert로 안내
        if(numcheck.value == "") {
    	alert("전화번호 중복체크를 해주세요")
    	return false;
    	}

4. 하고나서 존재하는 아이디값을 입력하고 중복확인을 하고 폼을 제출하게 되면

 

5. 요렇게 아이디 중복체크를 해달라고 안내가 뜹니다!