inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

10번이상 강의 보고 따라했는데 안되서 올려요

243

ilh22

작성한 질문수 2

0

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>회원가입</title>
        <meta name="keywordcontent="회원가입,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="textname="accountid="id-accountrequired="required">
                    <span class="alert-messageid="id-account-alert">test</span>
                </div>
                <div>
                    <label for="id-password">비밀번호</label>
                    <input type="passwordname="passwordid="id-passwordrequired="required">
                    <span class="alert-message">test</span>
                </div>
                <div>
                    <label for="id-password2">비밀번호 확인</label>
                    <input type="passwordname="password2id="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="numbername="birth-yearplaceholder="min="1900max="2222"required="required">
                        <select name="birth-monthid=""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="numbername="birth-dayplaceholder="min="1max="31"required="required">
                        <span class="alert-message">test</span>
                    </div>
                    <div>
                        <label>성별</label>
                        <input type="radioname="gender"id="id-gender-male"required="requiredvalue="male">
                        <label for="id-gender-male">남자</label>

                        <input type="radioname="genderid="id-gender-female"required="requiredvalue="female">
                        <label for="id-gender-female">여자</label>

                        <input type="radioname="genderid="id-unknown"required="requiredvalue="unknown">
                        <label for="id-unknown">기타</label>
                        <span class="alert-message">test</span>
                    </div>
            </fieldset>
            <div>
                <input type="checkboxname="agreeid="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 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(passowrdInput.value);
    console.log(passwordConfirmInput.value);

    console.log(selectInput.value);
    console.log(radioInput.value);
    console.log(checkInput.value);

    return false;
};


콘솔로그 창이 안나와여 제대로 작동이 된건지 아닌지 확인을 못하고있어요 이거 안되서 이 강의에 10시간 이상 계속 반복하면서 타이핑 하고 있습니다.
진도를 못나가고있어요
에러인지, 제가 잘못 타이핑 한건지 일목요연한 답변 부탁합니다.

javascript HTML/CSS

답변 1

0

itjustbong

안녕하세요,
ilh22 님.

해당 문제는 js파일의 47번 줄에 오타가 있어서 발생한 문제입니다.

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

에서는 passwordInput 이라고 선언되어 있는데,
console.log( passowrdInput.value )라고 오타가 있어서 에러가 발생했습니다.

return false;
까지 가지 못하고 중간에 리로드가 되는 것으로 파악됩니다.

그래서 
passwordInput 라고 오타만 수정해주면 정상적으로 console.log출력을 확인하실 수 있습니다.

혹시 문제를 파악하실때 도움이 되실지 모르겠어서,
간단하게 안내해드립니다.

위 사진에서 톱니바퀴 사진을 누르시고,
preserve log 버튼을 체크 후 실행을 시켜보시면 그 전 페이지에서 어떤 에러가 발생했는지,
확인하실 수 있습니다.

감사합니다.

0

ilh22

감사합니다

unregistered 이라 뜨며 작동하지 않습니다.

0

67

1

공부한 내용을 블로그에 정리해서 올려도되나요?

0

109

1

sublime text 설치 불가

0

188

1

사진과 본문 내용에 패딩이 40px 들어가 있는데 이유를 모르겠습니다

0

111

1

처음 질문과 옵션 관련 질문입니다.

0

97

1

마지막에 news 관련 질문

0

91

1

태그 닫는 단축키가 뭔가요?

0

175

1

강의에 사용하는 예제 코드 자료 있나요?

0

392

1

회원가입 폼 검증하기 실행이 안됩니다.

0

285

1

이미지랑 아이콘 파일을 어떻게 찾아요?

0

365

1

VS 코드는 절대 경로랑 상대 경로로 상위 문서 접근이 차단되어 있네요

0

482

0

프로젝트 고민 해결이 안되어 다시 올립니다.

0

398

1

프로젝트 고민 다시올립니다.

0

456

1

친구와의 프로젝트 고민

0

426

1

화면 오른쪽 스크롤이 넘어가질 않아요!

0

524

1

학과 설정

0

341

2

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

0

343

1

card.html 버튼 위치

0

612

1

인스타그램 코드 작성 후 동작을 해보았는데 버튼을 눌러도 넘어가질않네요

0

365

2

carousel의 footer부분에

0

305

1

margin 값에 관한 질문입니다.

0

416

1

function clearMessages() 함수의 원리를 알고싶습니다

0

325

1

removeEventListener

0

247

1

버튼을 눌렀을때 케러셀의 이동

0

817

2