인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

김보영님의 프로필 이미지
김보영

작성한 질문수

프로그래밍 시작하기 : 웹 입문 (Inflearn Original)

실습: 회원가입 폼 검증하기 - 2 (3-21)

return success

해결된 질문

작성

·

245

0

안녕하세요!

js파일에서 마지막에 리턴값이 false일 때에는 제출하면 화면이 잘 넘어갔는데, success로 변경하고 제출을 하면 404 오류가 나오는 이유가 뭘까요?ㅠㅠ

폼 액션은 변경 했습니다!

답변 5

1

안녕하세요,
김보영님.

올려주신 코드로 테스트 해본 결과 강의에서 처럼 정상적으로 작동합니다.
아마 문제가 되는 부분이 

<form action="validation.html" method="post">

이 부분 인 것같습니다.

action 의 속성으로 있는 validation.html 은 
validation.html 페이지로 이동하게 해줍니다.

그래서 만약 오류가 없을 경우에
다시 똑같은 페이지로 로딩이 됩니다.

김보영님께서 실행시키는 파일의 이름이
"validation.html"이 맞는지 확인 부탁드립니다.

혹시 다르다면 
form 의 action 속성과
파일의 이름을 동일하게 맞춰주시길 바랍니다!

감사합니다.

0

김보영님의 프로필 이미지
김보영
질문자

<html>
    <head>
        <meta charset="utf-8">
        <title>회원가입</title>
        <meta name="keywords" content="회원가입, html">
        <style>
            .alert-message {
                margin: 0 10px;
                color: #f09090;
                font-size: 14px;
                font-weight: 900;
            }
        </style>
    </head>
    <body>
        <h1>회원가입</h1>
        <hr>
        <form action="validation.html" method="post"> <!-- action에 아무것도 없으면 자기 자신에게 돌아감 -->
           <fieldset>
               <legend>계정 정보</legend>
                <div>
                    <label for="id-account">아이디</label>
                    <input type="text" name="account" id="id-account" required="required"> <!--required : 필수값 지정 submit시 검증 및 입력 확인 -->
                    <span class="alert-message" id="account-alert">TEST</span>
                </div>
                <div>
                    <label for="id-password">비밀번호</label>
                    <input type="password" name="password" id="id-password" required="required">
                    <span class="alert-message">TEST</span>
                </div>
                <div>
                    <label for="id-password2">비밀번호 확인</label>
                    <input type="password" name="password2" id="id-password2" required="required">
                    <span class="alert-message">TEST</span>
                </div>
            </fieldset>
            
            <fieldset>
                <legend>프로필</legend>
                <div>
                    <label for="id-name">이름</label>
                    <input type="text" name="name" id="id-name" required="required">
                    <span class="alert-message">TEST</span>
                </div>
                <div>
                    <label>생년월일</label>
                    <input type="number" name="birth-year" placeholder="년" min="1900" max="2020" required="required">
                    <select name="birth-month" required="required">
                       <option>월</option>
                    </select>
                    <input type="number" name="birth-day" placeholder="일" min="1" max="31" required="required">
                    <span class="alert-message">TEST</span>
                </div>
                
                <div>
                    <label>성별</label>
                    <input type="radio" name="gender" id="id-gender-male" required="required" value="male"/>
                    <label for="id-gender-male">남</label>
                    <input type="radio" name="gender" id="id-gender-female" required="required" value="female"/>
                    <label for="id-gender-female">여</label>
                    <input type="radio" name="gender" id="id-gender-unknown" required="required" value="unknown"/>
                    <label for="id-gender-unknown">기타</label>
                    <span class="alert-message">TEST</span>
                </div>
            </fieldset>
            
            <div>
                <input type="checkbox" name="agree" id="id-agree" required="required"/>
                <label for="id-agree">사이트 이용 약관과 개인정보 수집 방침에 동의합니다.</label>
            </div>
            
            <!-- <input type="submit" value="가입하기"/> -->
            <button type="submit">가입하기</button> <!-- button권장 -->
        </form>
        <script type="text/javascript" src="scripts/validation.js"></script>
    </body>
</html>

해당 html 코드입니다! 감사합니다😭

0

안녕하세요, 
김보영님.

코드를 첨부해 주셔서 감사합니다.
하지만, html코드 첨부도 부탁드립니다.

js파일은 문제될 부분이 보이지 않기도 하며,
페이지가 엉뚱한 곳으로 가는 것은
아마도 html에서의 form부분,
혹은 파일 경로를 확인해 볼 필요가 있을 것 같습니다.

시원한 답변을 드리지 못해서 죄송합니다만,
HTML코드 첨부도 부탁드리겠습니다.

감사합니다.

0

김보영님의 프로필 이미지
김보영
질문자

window.addEventListener('load', function() {
    clearMessages();
    
    var formElem = document.querySelector('form');
    formElem.onsubmit = submitForm;
    
    //월 추가
    var selectInput = document.querySelector('select[name="birth-month"]');
    for (var i=1; i<=12; i++) {
        var option = document.createElement('option');
        option.innerHTML = i + '월';
        option.value = i;
        
        selectInput.appendChild(option);
    }
    
});

function clearMessages() {
    var messages = document.getElementsByClassName('alert-message');
    for (var i=0; i<messages.length; i++) {
        messages[i].style.display = 'none';
    }
}

function showMessage(inputElement, message) {
    var messageElem = inputElement.parentNode.querySelector('span');
    messageElem.style.display = 'inline';
    messageElem.innerText = message;
    
    inputElement.focus();
}

function submitForm() {
    //account info
    var accountInput = document.querySelector('input[name="account"]');
    var passwordInput = document.querySelector('input[name="password"]');
    var passwordConfirmInput = document.querySelector('input[name="password2"]');
    
    //select, radio, checkbox
    var selectInput = document.querySelector('select[name="birth-month"]');
    var radioInput = document.querySelector('input[name="gender"]:checked'); 
    var checkInput = document.querySelector('input[name="agree"]');
    
    console.log(accountInput.value);
    console.log(passwordInput.value);
    console.log(passwordConfirmInput.value);
    
    console.log(selectInput.value);
    console.log(radioInput.value);
    console.log(checkInput.value);
    
    var success = true;
    if(accountInput.value.length < 6) {
        showMessage(accountInput, '계정은 6자리 이상이어야 합니다.');
        success = false;
    }
    
    if(passwordInput.value.length < 10) {
        showMessage(passwordInput, '비밀번호는 10자리 이상이어야 합니다.');
        success = false;
    }
    
    if(passwordConfirmInput.value !== passwordInput.value) {
        showMessage(passwordConfirmInput, '비밀번호를 동일하게 입력해주세요');
        success = false;
    }
    
    return success;
}

js파일은 위의 코드처럼 작성하였고, 말씀하신 <form action ="validation.html" method="post"> 또한 변경하였는데도 오류가 발생하네요..ㅠㅠ 혹시 제가 놓친 부분이 있을까요?

0

안녕하세요, 
김보영님.

validation.js 파일 중 submitForm 함수의 리턴 값이 return false;  일 경우에는 페이지가 넘어가지만,
return success; 일 경우에는 404에러 페이지가 뜨는 상황이신 것 같습니다.

강의에서 나온 코드를 살펴보면, 
submitForm의 리턴값이 false일 경우에는,
계정 값이 6자리 미만이거나,
비밀번호가 10자리 미만이거나,
비밀번호 확인이 동일하지 않을 경우입니다.

이 경우에서는 페이지가 넘어가지 않아야합니다.


또한, success값을 true로 선언하고, 리턴 값을 success로 변경하셨음에도
404페이지가 뜬다면, form의 action 속성이 validation.html 으로 변경 되었는지 확인 부탁드립니다.

<form action = "validation.html" method = "post">

김보영님의 질문을 제대로 이해한 것이 맞는지 모르겠습니다.

코드를 확인 할 수 없어,
정확한 해결책을 드리기는 어렵습니다😓

혹시 위의 답변이 도움이 되지 않았다면,
김보영님이 작성하신 코드도 첨부해 주시길 바라겠습니다.

감사합니다.

김보영님의 프로필 이미지
김보영

작성한 질문수

질문하기