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

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

king7762225님의 프로필 이미지
king7762225

작성한 질문수

남박사의 파이썬으로 실전 웹사이트 만들기

Javascript, jQuery 폼 검증 기능 추가하기

비밀번호가 일치하지않습니다

작성

·

447

1

{% extends "main.html" %}

{% block contents %}
<script>
     function checkForm() {
        if($.trim($("#name").val()) == "") {
            alert("이름을 입력하세요");
            $("#name").focus();
            return false;
        }
        if($.trim($("#emeil").val()) == "") {
            alert("이메일을 입력하세요");
            $("#emeil").focus();
            return false;
        }
        if(!emeilpa($.trim($("#emeil").val()))) {
            alert("이메일을 형식이 올바르지 않습니다.");
            $("#emeil").focus();
            return false;
        }
        if($.trim($("#pass1").val()) == "") {
            alert("비밀번호를 입력하세요");
            $("#pass1").focus();
            return false;
        }
        if($.trim($("#pass2").val()) == "") {
            alert("비밀번호확인을 입력해주세요.");
            $("#pass2").focus();
            return false;
        }
        if($.trim($("#pass1").val()) != $.trim($("#pass2").val())) {
            alert("비밀번호가 일치하지 않습니다..");
            $("#pass2").select.focus();
            return false;
        }
        return true;
    }
</script>
<table>
    <form name="form" action="{{url_for('member.member_join')}}" method="POST" onsubmit="return checkForm()">
        <thead>
            <caption>회원가입</caption>
        </thead>
        <tbody>
            <tr>
                <td>이름</td>
                <td><input type="text" name="name" id="name"></td>
            </tr>
            <tr>
                <td>아이디</td>
                <td><input type="text" name="emeil" id="emeil"></td>
            </tr>
            <tr>
                <td>비밀번호</td>
                <td><input type="password" name="pass1" id="pass1"></td>
            </tr>
            <tr>
                <td>비밀번호 확인</td>
                <td><input type="password" name="pass2" id="pass2"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="가입하기"></td>
            </tr>
        </tbody>
    </form>
</table>
{% endblock %}

웹에서 회원가입할때 이름과 이메일 비밀번호를 입력하지 않았을시에는 정상적으로 코드가 실행되고 경고 창이 뜨고 작성했던 내용(이름 아이디 비밀번호) 이 그대로 유지되는데 비밀번호와 비밀번호확인란을 다르게 입력했을때만  경고창이 두번뜨면서 새로고침이 되고  .focus 되지않고 기존에 작성 했던 내용도 리셋이 됩니다. form이 실행되서 member_join으로 가서 경고문이 두번 뜨는데  분명 onsubmit 으로 인해 전송이 안돼야하는데  왜 비밀번호가 일치하지 않습니다에서만 보내지는 걸까요 ... 

왜 그런걸까요 혹시몰라서 return true도 작성했는데도 안됩니다.. 제 머리로는 어떤 부분을 놓치고있는건지 이해가 가질않습니다.. 

아니면 다른이유가 있는 걸까요 ? 

답변 1

0

남박사님의 프로필 이미지
남박사
지식공유자

이런경우 checkform 함수의 내용을 모두 지우시고

alert($.trim($("#name").val()));

 if($.trim($("#name").val()) == "") {

            alert("이름을 입력하세요");

            $("#name").focus();

            return false;

}

 

이렇게 한가지씩  alert을 띄워서 값을 확인해보고 코드가 정상 동작하는지 테스트 해보는 방법도 있습니다. 문제가 없다면 다음 내용.. 다음내용 이런식으로 step by step 으로 추가해보는 방법입니다.

king7762225님의 프로필 이미지
king7762225

작성한 질문수

질문하기