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

락곤님의 프로필 이미지
락곤

작성한 질문수

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

회원가입폼 검증 -2 에서 문제가생겼습니다

작성

·

237

0



<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>회원가입</title>

    <meta name="keyword" content="회원가입,html">



</head>

<style>
    .alert-message {

        margin: 0 10px;

        color: #f09090;

        font-size: 14px;

        font-weight: 900;

    }
</style>

<body>

    <h1>회원가입</h1>

    <hr />

    <!--action 비워두면 자기자신한테던진다.-->

    <form action="validation.html" methed="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="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>
                <!--required  submit에 가입하기 중단시키는 역할-->

                <input type="number" name="birth-year" placeholder="년" min="1900" max="2222" required="required">

                <select name="birth-month" id="" required="required">

                    <option value="">월</option>

                    <option value="1">1월</option>

                    <option value="2">2월</option>

                    <option value="3">3월</option>

                    <option value="4">4월</option>

                    <option value="5">5월</option>

                    <option value="6">6월</option>

                    <option value="7">7월</option>

                    <option value="8">8월</option>

                    <option value="9">9월</option>

                    <option value="10">10월</option>

                    <option value="11">11월</option>

                    <option value="12">12월</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-unknown" required="required" value="unknown">

                <label for="id-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>

    </form>

    <script type="text/javascript" src="scripts/validation.js"></script>

</body>

</html>

 

 

 

 

 

window.addEventListener('load',function(){

    clearMessages();



    var formElem=document.querySelector('form');

    formElem.onsubmit=submitForm;

});



function clearMessages(){

    var messages=document.getElementsByClassName('alert-message');

    for (var i=0; i<messages.length;i++){

        messages[i].style.display='none';

    }

}

function showM(inputElement, message){
    var messageEle = inputElement.parentNode.querySelector('span');
   messageEle.style.display ='lnline';
   messageEle.innerText =message;

   inputElement.focus();
}

function submitForm(){

    var accountInput=document.querySelector('input[name="account"]');

    var passwordInput=document.querySelector('input[name="password"]');

    var passwordConfirmInput=document.querySelector('input[name="password2"]');



    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);

    if(accountInput.value.length<6){
        showM( accountInput , '아이디는 6글자이상이여야합니다.');
    }

    return false;

};

 

 

 

 '아이디는 6글자이상이여야합니다이라는 오류가 안나와요 

 

답변 1

2

안녕하세요. 락곤님

문의하신 내용 확인해본 결과 validation.js 파일에서 오타가 있는것으로 확인됩니다.

function showM(inputElement, message){
    var messageEle = inputElement.parentNode.querySelector('span');
   messageEle.style.display ='lnline';
   messageEle.innerText =message;

   inputElement.focus();
}

showM이라는 함수의 3번째줄 messageEle.style.display ='lnline'; 부분에서 lnline이 아니라 inline으로 변경해보시면 되실겁니다!(l -> i)

변경해도 안된다면 다시 문의주시면 감사하겠습니다.

오늘도 즐거운 공부시간 되시길 바라겠습니다. :)

락곤님의 프로필 이미지
락곤

작성한 질문수

질문하기