김보영

<pre class="language-html"><code><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"> 
           <fieldset>
               <legend>계정 정보</legend>
                <div>
                    <label for="id-account">아이디</label>
                    <input type="text" name="account" id="id-account" required="required"> 
                    <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>
            
            
            <button type="submit">가입하기</button> 
        </form>
        <script type="text/javascript" src="scripts/validation.js"></script>
    </body>
</html></code></pre>
<p>해당 html 코드입니다! 감사합니다😭</p>

return success

<p></p>
<pre class="language-javascript"><code>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;
}</code></pre>
<p>js파일은 위의 코드처럼 작성하였고, 말씀하신 <form action ="validation.html" method="post"> 또한 변경하였는데도 오류가 발생하네요..ㅠㅠ 혹시 제가 놓친 부분이 있을까요?</p>

김보영

게시글