회원가입 에러메시지

class RegisterService {
    static #instance = null;
    static getInstance() {
        if(this.#instance == null) {
            this.#instance = new RegisterService();
        }
        return this.#instance;
    }

    setErrorMessage(errors) {
        const registerError = document.querySelectorAll(".register-error");

       
    }

RegisterServiec class에 

setErrorMessage method를 만들고 파라매터 값으로 errors를 넣어준다 (Json으로 error 가 응답받을 때 error메시지가 매게변수임) 

 

class RegisterApi {
    static #instance = null;
    static getInstance() {
        if(this.#instance == null) {
            this.#instance = new RegisterApi();
        }
        return this.#instance;
    }

    register(user) {
        $.ajax({
            async: false,
            type: "post",
            url: "/api/account/register",
            contentType: "application/json",
            data: JSON.stringify(user),
            dataType: "json",
            success: response => {
                
               
            },
            error: error => {
                console.log(error);
                RegisterService.getInstance().setErrorMessage(error.responseJSON.data);
            }
        });
    }
}

AJAX요청할때 RegisterServiec.getInstance().setErrorMessage(error.responseJson.data);로 보낸다

error.responseJSON에 있는 error메시지

UserDto에서 repassword @NotBlank해주기

 

 

User 객체에 repassword 와 생성자에 repassword추가

 

 

class RegisterEvent {
    static #instance = null;
    static getInstance() {
        if(this.#instance == null) {
            this.#instance = new RegisterEvent();
        }
        return this.#instance;
    }

    addRegisterSubmitOnclickEvent() {
        const registerSubmit = document.querySelector(".register-submit");

        registerSubmit.onclick = () => {
            const usernameValue = document.querySelectorAll(".register-inputs")[0].value;
            const passwordValue = document.querySelectorAll(".register-inputs")[1].value;
            const repasswordValue = document.querySelectorAll(".register-inputs")[2].value;
            const nameValue = document.querySelectorAll(".register-inputs")[3].value;
            const emailValue = document.querySelectorAll(".register-inputs")[4].value;

            const user = new User(usernameValue, passwordValue, repasswordValue, nameValue, emailValue);

            RegisterApi.getInstance().register(user);
        }
    }
}

 

registersubmit.onclick() {}에 repasswordValue 추가

 

class RegisterService {
    static #instance = null;
    static getInstance() {
        if(this.#instance == null) {
            this.#instance = new RegisterService();
        }
        return this.#instance;
    }

    setErrorMessage(errors) {
        const registerError = document.querySelectorAll(".register-error");

        this.#clearErrorMessage();

        Object.keys(errors).forEach(error => {
            if(error == "username") {
                registerError[0].textContent = errors[error];
            }else if(error == "password") {
                registerError[1].textContent = errors[error];
            }else if(error == "repassword") {
                registerError[2].textContent = errors[error];
            }else if(error == "name") {
                registerError[3].textContent = errors[error];
            }else if(error == "email") {
                registerError[4].textContent = errors[error];
            }
        });
    }

    #clearErrorMessage() {
        const registerError = document.querySelectorAll(".register-error");
        registerError.forEach(error => {
            error.textContent = "";
        });
    }
}

 

Object.keys(errors)로 AJAX로 받은 에러의 key값과 value값이 저장되어있는 map객체를 for문을 올려서 

error객체의 key값에 대한 각각의 조건문을 걸고

 registerError[i].textContent = errors[error];로 각각의 에러명을 해당하는 input밑에 textContent로 메세지를 넣어준다

 

녹화_2023_05_10_00_31_52_556.mp4

0.34MB

class RegisterService {
    static #instance = null;
    static getInstance() {
        if(this.#instance == null) {
            this.#instance = new RegisterService();
        }
        return this.#instance;
    }

    setErrorMessage(errors) {
        const registerError = document.querySelectorAll(".register-error");

        this.#clearErrorMessage();

        Object.keys(errors).forEach(error => {
            if(error == "username") {
                registerError[0].textContent = errors[error];
            }else if(error == "password") {
                registerError[1].textContent = errors[error];
            }else if(error == "repassword") {
                registerError[2].textContent = errors[error];
            }else if(error == "name") {
                registerError[3].textContent = errors[error];
            }else if(error == "email") {
                registerError[4].textContent = errors[error];
            }
        });
    }

    #clearErrorMessage() {
        const registerError = document.querySelectorAll(".register-error");
        registerError.forEach(error => {
            error.textContent = "";
        });
    }
}

 #clearErrorMessage() {
        const registerError = document.querySelectorAll(".register-error");
        registerError.forEach(error => {
            error.textContent = "";
        });
    }
}

4개의 항목중에 하나라도 입력이 제대로 되어있다면 그부분은 에러메세지를 보여주면 안되기 때문에 error메시지 전체를 초기화 하는 과정을 추가로 넣고

 setErrorMessage(errors) {
        const registerError = document.querySelectorAll(".register-error");

        this.#clearErrorMessage();

        Object.keys(errors).forEach(error => {
            if(error == "username") {
                registerError[0].textContent = errors[error];
            }else if(error == "password") {
                registerError[1].textContent = errors[error];
            }else if(error == "repassword") {
                registerError[2].textContent = errors[error];
            }else if(error == "name") {
                registerError[3].textContent = errors[error];
            }else if(error == "email") {
                registerError[4].textContent = errors[error];
            }
        });
    }

error메시지를 textContent로 보여주기 전에 #clearErrorMessage();메시지를 호출해서 에러메시지를 모두 초기화 하고 에러가 있는 부분들만 보여줌

this는 두 메소드 모두가 RegisterServiec객체에 있기 때문에 해줌

#은 private

 

결과

 

녹화_2023_05_10_00_46_56_292.mp4

0.35MB

녹화_2023_05_10_00_47_38_571.mp4

0.80MB