-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
join html에 javascript를 통해 폼기능 검증 코드를 추가하였으나 제대로 동작하지 않습니다.
21.05.06 15:10 작성 조회수 155
1
안녕하세요, javascript를 통한 폼 기능 검증을 위해 코드를 작성하던 중,
회원가입 코드 작성에서 제대로 동작하지 않아 문의드립니다.
아래와 같이 코드를 작성하였으나 동작하지 않고 기존 member.py에서 구현한 검증기능만 동작하고 있는데요, 어떤 부분이 문제인지 궁금합니다. ( 이메일만 입력 후 회원가입 시도 시 member.py에서 구현한 "입력되지 않은 값이 있다"라는 오류메시지가 뜹니다.)
join.html
{% extends 'main.html' %}
{% block contents%}
<script>
function checkForm() {
if($.trim($("#name").val()) == ""){
alert("이름을 입력하세요");
$("#name").focus();
return false;
}
if($.trim($("#email").val()) == ""){
alert("이메일을 입력하세요");
$("#email").focus();
return false;
}
if(!vailidateEmail($.trim($("#email").val()))) {
alert("이메일 유효성이 올바르지 않습니다.")
$("#email").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;
}
}
</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="email" id= "email"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="pass" id="pass1"></td>
</tr><tr>
<td>비밀번호 확인</td>
<td><input type="password2" name="pass2" id="pass2"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="가입하기"></td>
</tr>
</form>
</table>
{%endblock%}
답변을 작성해보세요.
0
남박사
지식공유자2021.05.11
위의 코드 내용만 봐서는 특별히 오류나는 부분을 찾기가 어렵습니다.
보통 자바스크립트에서 문제가 생기면 여러가지 디버깅 방법이 있겠지만 아주 단순하게
<script>
function checkForm() {
alert("enter check form");
if($.trim($("#name").val()) == ""){
alert("이름을 입력하세요");
return false;
}
alert("exit");
</script>위처럼 자바스크립트의 함수를 단순화 하여 alert("") 혹은 console.log("") 을 이용해 함수가 호출은 되고 있는지 혹은 어떤 특정 구간에서 오류가 발생하는지를 확인해보시는게 좋을듯 합니다. 이렇게 문제가 없으면 기존의 코드를 한줄 더 추가해보고 확인해보고 이렇게 반복해보시기 바랍니다.
답변 1