회원가입 버튼 비활성화

아이디중복 검사와 이메일 인증을 실행하고 성공해야만 회원가입을 할 수 있도록

처음에는 회원가입 버튼이 비활성화 되어 있는 상태에서 성공했을때 활성화 시키는 기능을 구현하였다.

이전에는 아이디 중복 검사와 이메일 인증을 성공했을때 나오는 성공 문자열을 동일한지 비교해서 구현했었는데 

script의 다른 함수들과 합치니 오류가 발생하였다. 

 

우선 회원가입 버튼을 비활성화 하고 isEmailValid와 isEmailCodeValid를 false로 선언해두었다.

const signupButton = document.getElementById('signup');
        signupButton.disabled = true;
        let isEmailValid = false;
        let isEmailCodeValid = false;

아이디 중복검사와 이메일 인증검사 각각에 아래와같이 일치하면 true, 불일치하면 false값을 주었다.

if문 후에 updateSignupButtonState 함수를 실행시켜줄것!

          if (result == "가입불가") {
            duplicateResultElement.textContent = "중복된 Email입니다.";
            duplicateResultElement.style.color = "red";
            isEmailValid = false;
            // 다른 스타일링 등의 추가적인 처리 가능
          } else if (result == "가입가능") {
            duplicateResultElement.textContent = "사용 가능한 Email입니다.";
            duplicateResultElement.style.color = "green";
            isEmailValid = true;
            // 다른 스타일링 등의 추가적인 처리 가능
          }
          updateSignupButtonState();
        }

updateSignupButtonState 함수에서 각각 isEmailValid와 isEmailCodeValid 가 true인 경우에만 버튼이 활성화 되도록 하였다.

function updateSignupButtonState(){
          if(isEmailValid && isEmailCodeValid){
            signupButton.disabled = false;
          }else{
            signupButton.disabled = true;

          }
        }