중복확인

회원가입 기능중 아이디 중복확인 기능을 구현하고자 한다.

function doubleCheck()
	if (id === '') {
      alert('아이디를 입력하세요.')
    } else {
        .
        .
      (생략)
        .
      	.
      if (dbCheck === 1) {
        alert('이미 사용중인 아이디입니다.')
      else {
        alert('사용 가능한 아이디입니다.')
      }

사용자가 입력한 아이디가 DB에 이미 있으면 dbCheck변수를 1로 설정하고 없으면 0으로 설정했다.

하지만 문제가 발생했다. 바로 중복확인 버튼을 누르지 않고도 가입이 가능하다는 것이다. 입력한 아이디가 중복되지만 않는다면 따로 중복확인 버튼을 눌러서 확인을 받지 않더라도 가입이 가능하다.
즉 중복확인을 무조건 받아야만 가입 할 수 있게 구현해야 했다.

아이디 입력후 중복확인버튼을 눌렀을 때 어딘가에 변화를 주고 변화가 있어야만 가입버튼이 작동하게 구현해야 한다.
그 어딘가를 찾기위해 열심히 구글링을 하다가 html의 input태그안에 커스텀 속성을 추가할 수 있다는 사실을 깨달았다.
아이디 입력후 중복확인 버튼을 눌렀을 때 중복이 아닐때만 아이디 input태그의 속성값을 바꿔주고 속성값이 바뀐 상태일때만 가입버튼이 작동하게 하면 될 것이다.

먼저 아이디를 입력하는 input태그에 check_result라는 속성값을 생성해주고 fail로 설정해 주었다.

<input ...(생략)... check_result="fail" required>

그리고 나서 중복확인 버튼을 눌렀을 때 중복값이 없다면 jQuery의 attr매서드를 사용하여 check_result의 값을 success로 바꿔주었다.

//중복확인 메서드
function doubleCheck() {
  	.
  	.
  (생략)
  	.
  	.
  if (/*중복값이 없다면*/) {
      $('#loginId').attr("check_result", "success")
    }
}

그리고 마지막으로 가입버튼을 눌렀을 때 로그인input태그의 check_result값이 fail이라면 중복확인 요구 알림을 띄운다.

//가입 메서드
function register() {
  	.
  	.
  (생략)
  	.
  	.
  if ($('#loginId').attr("check_result") === "fail") {
    alert('아이디 중복확인을 헤주세요.')
  } else {
    	.
        .
      (생략)
    	.
        .
  }
}

이렇게 무조건 중복확인을 받아야 가입이 가능하게 구현했다.

참고한 블로그
[javascript] 회원가입 시, 아이디 중복 확인하기 - ajax