고정 헤더 영역
상세 컨텐츠
본문
onsubmit : submit 이벤트가 발생했을때 체크 (서버로 전송 전에 데이터 체크)
값이 올바른 경우에는 전송, 값이 올바르지 않은 경우에는 취소
onsubmit="return false" - 결과가 false라면 전송하지 않음
소스
<body>
<form name="mForm" action="a.html" onsubmit="return doAction();">
id: <input type="text" name="id" /><br />
pass: <input type="password" name="pass" /><br />
pass 확인: <input type="password" name="pass2" /><br />
<button>확인</button>
<!-- type을 button으로 설정하면, 기본으로 submit이 되지 않는다 (사용자 정의 동작)-->
<button type="button" onclick="doAction2();">확인2</button>
</form>
<script>
// 특정 엘리먼트의 값이 비어있는지 확인 후 값이 없으면 true, 아니면 false를 반환
function isEmpty(obj, msg) {
// obj가 문자열이라면 문자열에 해당하는 엘리먼트에 접근
if (typeof obj == "string") {
obj = document.querySelector("#" + obj);
}
if (obj.value == "") {
alert(msg);
obj.focus();
return true;
}
return false;
}
function doAction() {
// 입력값이 잘못된 경우 false를 리턴
/* 하나씩 접근할 경우 ..
document.querySelector("input[name='id']");
document.querySelector("input[name='pass']");
document.querySelector("input[name='pass2']");
*/
// form name으로 바로 접근 - form 안에서 id 이름을 가진 엘리먼트에 접근
//var idEle = document.mForm.id;
var f = document.mForm; // f는 mForm을 가르킴
if (isEmpty(f.id, "아이디를 입력하세요!")) return false;
if (isEmpty(f.pass, "패스워드를 입력하세요!")) return false;
if (isEmpty(f.pass2, "패스워드 확인을 입력하세요!")) return false;
if (f.pass.value != f.pass2.value) {
// 입력값이 다를 경우 포커스는 첫번째 칸으로
f.pass.focus();
// 첫번째 칸에 벨류를 선택상태로
f.pass.select();
// 두번째 칸은 값을 지운다.
f.pass2.value = "";
alert("패스워드가 서로 다릅니다.");
return false;
}
return true;
}
function doAction2() {
alert("확인2 눌렀음...");
var f = document.mForm;
if (isEmpty(f.id, "아이디를 입력하세요!")) return;
if (isEmpty(f.pass, "패스워드를 입력하세요!")) return;
if (isEmpty(f.pass2, "패스워드 확인을 입력하세요!")) return;
if (f.pass.value != f.pass2.value) {
// 입력값이 다를 경우 포커스는 첫번째 칸으로
f.pass.focus();
// 첫번째 칸에 벨류를 선택상태로
f.pass.select();
// 두번째 칸은 값을 지운다.
f.pass2.value = "";
alert("패스워드가 서로 다릅니다.");
return false;
}
// 모든 입력값이 올바를때, 폼의 데이터를 서버로 전송 (submit)
// 기본 form 액션에 설정된 페이지가 아닌 다른 페이지로 변경할 때
f.action = "bbb.html";
// 폼을 서브밋 한다.
f.submit();
}
</script>
</body>
결과 (action 설정한 페이지는 없으므로 서브밋 성공시 에러 페이지가 뜨는것은 정상!)
'개발 > JavaScript' 카테고리의 다른 글
| JavaScript - select 객체(selectedIndex, options) (0) | 2020.06.04 |
|---|---|
| JavaScript - checkbox 상태 확인(checked) (0) | 2020.06.04 |
| JavaScript - 엘리먼트의 값 추가, 삭제(innerHTML, remove) (0) | 2020.06.03 |
| JavaScript - 엘리먼트의 속성 추출하기(getAttribute) (0) | 2020.06.03 |
| JavaScript - 엘리먼트의 속성 추가하기 2 (setAttribute) (0) | 2020.06.03 |
댓글 영역