회원가입 시, 빈 데이터가 있을 경우 경고창이 뜨도록 하려고 한다
문제]
조건을 m_id == '' 두고 아이디값을 공백으로 두고 submit 시, return false에 의해 submit되지 않아야 하는데
submit이 되면서 redirect 되었고, db에 공백의 아이디,비번,.등의 회원정보가 등록되었다
(tbl 생성시 column을 not null로 넣었는데 어떻게 공백이 들어갔을까..?)
해결]
<html>
<form class="user" name="member_regist" >
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<label>아이디</label>
<input type="text" class="form-control" name="m_id" id="m_id">
</div>
</div>
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<label>비밀번호</label>
<input type="text" class="form-control" name="m_passwd" id="m_passwd">
</div>
</div>
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<label>이름</label>
<input type="text" class="form-control" name="m_name" id="m_name">
</div>
</div>
<input type="submit" class="form-control" value="가입하기" onclick="memberRegist();">
</form>
<javascript>
function memberRegist() {
let thisform = document.member_regist;
let m_id = document.getElementById('m_id').value;
let m_passwd = document.getElementById('m_passwd').value;
let m_name = document.getElementById('m_name').value;
//let m_phone = document.getElementById('m_phone').value;
if (m_id == '') {
alert('아이디를 입력하세요');
return false;
} else if (m_passwd == '') {
alert('비밀번호를 입력하세요');
return false;
} else if (m_name == '') {
alert('이름을 입력하세요');
} else {
thisform.method = "post";
thisform.action = "/member/insert";
thisform.submit();
alert ('회원가입 되었습니다');
}
};// [else부문 수정]
// return 받아왔으니 else도 return으로 통일하는게 맞나
thisform.method = "post";
thisform.action = "/member/insert";
//thisform.submit();
alert ('회원가입 되었습니다'); // alert -> return 순으로 가야 경고창이 뜸
return true;- form 내에 method와 action을 js 마지막으로 빼준다음(thisform.submit 시, 전송되도록)
- 가입이 안되게 할 시엔 return false으로 반환해줌
참고]
https://hoyashu.tistory.com/181
[Javascript] 자바스크립트로 form 폼체크 후 submit하기
1️⃣ html form태그에 action을 지운다. > onsubmit="return false;" 을 적어준 이유 : 폼체크 후 input내 내용이 삭제되지 않게 하기 위함임! (참고링크) 2️⃣ if문으로 폼태그의 정보를 확인한다. 3️⃣ fo..
hoyashu.tistory.com
'Frontend > Javascript' 카테고리의 다른 글
| 02 객체 (0) | 2022.10.28 |
|---|---|
| 01 기초문법 (0) | 2022.10.28 |
| alert창 나타나게 하는법 (0) | 2022.03.24 |
| javascript void(0) 의미 (0) | 2021.12.07 |
| var, let, const 비교 (1) (0) | 2021.12.06 |
댓글