유효성 검사시 기존 작성 데이터가 사라지는 문제 해결

function register() {
        // e.preventDefault(); // 폼 제출 방지

        // 1. 여기서 내가 화면에서 post 로 입력하는 정보를 하나하나 가져오기
        var name = $('#name').val()
        var nickname = $('#nickname').val()
        var username = $('#username').val()
        var password = $('#password').val()
        var passwordConfirm = $('#passwordConfirm').val()
        var phoneNumber = $('#phoneNumber').val()
        var profilePicture = $('#profilePicture').val()
        var zipcode = $('#zipcode').val()
        var streetAdr = $('#streetAdr').val()
        var detailAdr = $('#detailAdr').val()

        console.log(name);
        console.log(nickname);
        console.log(username);
        console.log(password);
        console.log(passwordConfirm);
        console.log(phoneNumber);
        console.log(profilePicture);
        console.log(zipcode);
        console.log(streetAdr);
        console.log(detailAdr);

        // 2. 유효성 검사

        // 각 필드의 유효성을 검사합니다.
        var isValid = true;

        // 비밀번호가 8~16자 영문, 숫자, 특수문자를 사용하도록 검증
        var passwordRegex = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*\W)(?=\S+$).{8,16}$/;

        if (!passwordRegex.test(password)) {
            alert('비밀번호는 8~16자 영문, 숫자, 특수문자를 사용해야 합니다.');
            return;
        }

        // 비밀번호 확인 유효성 검사
        if (passwordConfirm.trim() === "") {
            $("#passwordConfirmError").text("비밀번호 확인을 입력하세요.");
            isValid = false;
        } else if (password !== passwordConfirm) {
            $("#passwordConfirmError").text("비밀번호가 일치하지 않습니다.");
            isValid = false;
        } else {
            $("#passwordConfirmError").text("");
        }

        // 이름 유효성 검사
        if (name.trim() === "") {
            $("#nameError").text("이름을 입력하세요.");
            isValid = false;
        } else {
            $("#nameError").text("");
        }

        // 이메일 유효성 검사 (이메일 형식 체크)
        var emailPattern = /^(?:\w+\.?)*\w+@(?:\w+\.)+\w+$/;
        if (!emailPattern.test(username)) {
            $("#usernameError").text("올바른 이메일 형식이 아닙니다.");
            isValid = false;
        } else {
            $("#usernameError").text("");
        }

        // 닉네임 유효성 검사
        var nicknamePattern = /^[ㄱ-ㅎ가-힣a-z0-9-_]{2,10}$/;
        if (!nicknamePattern.test(nickname)) {
            $("#nicknameError").text("닉네임은 특수문자를 제외한 2~10자리여야 합니다.");
            isValid = false;
        } else {
            $("#nicknameError").text("");
        }

        // 휴대폰 번호 유효성 검사
        if (phoneNumber.trim() === "") {
            $("#phoneNumberError").text("휴대폰 번호를 입력하세요.");
            isValid = false;
        } else {
            $("#phoneNumberError").text("");
        }



        if (!isValid) {
            // 유효성 검사에 실패한 경우 경고 메시지만 표시하고 폼을 서버로 제출하지 않음
            return;
        }

       // 3. 가져온 정보를 data로 묶기
        let data = {
            "name" : name,
            "nickname" : nickname,
            "username" : username,
            "password" : password,
            "passwordConfirm" : passwordConfirm,
            "phoneNumber" : phoneNumber,
            "profilePicture" : profilePicture,
            "zipcode" : zipcode,
            "streetAdr" : streetAdr,
            "detailAdr" : detailAdr
        }

        // 4. 클라에서 가져온 데이터를 서버로 전송 (이 예시에서는 URL이 '/register'로 가정)
        $.ajax({
            type: 'POST',
            url: '/register', // 가입완료 버튼을 누르면 이 URL로 매핑!!! 마지막에 가는게xx

            // 사용자가 입력한 정보들이 위에 변수로 수집되고, 그 정보는 아래의 data라는 객체에 저장된다.
            // 이 객체는 json 데이터형식을 가지며, 각 입력필드의 값을 해당 필드의 이름으로 매핑한다!!
            // 이 요청은 /register url로 보내지며, 서버의 컨트롤러 중에 @PostMappling("/register")가 달린 메소드가 호출된다.
            // 이 메서드는 json형식의 데이터인 'userDto' 객체를 파라미터로 받는다.

            data: JSON.stringify(data),
            contentType: 'application/json', // JSON 형식의 데이터를 전송
            success: function (response, status, xhr) { // response 객체에 success, msg가 json형식으로 존재함(컨트롤러에서 반환한 값이 json으로 들어옴)
                console.log(response); //응답 body부 데이터
                console.log(status); //"succes"로 고정인듯함
                console.log(xhr);
                if (xhr.status === 200) {
                    // 서버 응답의 상태 코드가 200일 때만 실행
                    alert('가입이 완료되었습니다!');
                    location.href = "/board";
                } else {
                    // 가입 실패 처리
                    alert('서버에서 오류가 발생했습니다.');
                }
            },
            error: function (response, status, xhr) {
                // 서버 요청 실패 시 실행
                console.log('실패했다...')
                console.log(response); //응답 body부 데이터

                alert('서버 요청 실패');
            }
        });

        return true;

        // // 5. 모든 필드가 유효한 경우 폼을 서버로 제출할 수 있습니다.
        // if (isValid) {
        //     $("#registrationForm")[0].submit();
        // }
}

비밀번호를 작성하지 않고 가입완료 버튼을 누르면, 알림창이 뜨고 기존의 데이터는 모두 지워지게 된다. 

지워지지 않도록 하려면 어떻게 해야할까?

 

type="submit" 에서 type="button" 으로 변경해주었더니 해결되었다!!

<button class="btn btn-primary btn-lg btn-block" type="submit" id="registrationForm" onclick="register()">가입 완료</button>

<button class="btn btn-primary btn-lg btn-block" type="button" id="registrationForm" onclick="register()">가입 완료</button>