이해니

이해니

CoreBanking Developer 전자금융

onsubmit과 required

2 분 소요

form 태그 submit의 에러체크

가끔 form에서 submit을 하려고 하면 다양한 에러사항이 꼿힐때가 많다.

아래 회원가입 입력폼을 확인해보자.

<form action="join.jsp" method="post">
			<table border="1" style="width: 60%">
				<tr>
					<th>아이디</th>
					<td>
						<input type="text" name="id" required>
					</td>
				</tr>
				<tr>
					<th>이름</th>
					<td>
						<input type="text" name="name" required>
					</td>
				</tr>
				<tr>
					<th>비밀번호</th>
					<td>
						<input type="password" name="password" required>
					</td>
				</tr>
				<tr>
					<th>이메일</th>
					<td>
						<input type="text" name="email_id" required>
						@
						<select name="email_domain">
							<option>naver.com</option>
							<option>daum.net</option>
							<option>google.com</option>
						</select>
					</td>
				</tr>
				<tr>
					<th>전화번호</th>
					<td>
						
						<select name="tel1">
							<option>010</option>
							<option>011</option>
						</select>
						-
						<input type="text" name="tel2" required> 
						-
						<input type="text" name="tel3" required>
					</td>
				</tr>
				<tr>
					<th>우편번호</th>
					<td>
						<input type="text" name="post" required>
					</td>
				</tr>
				<tr>
					<th>주소</th>
					<td>
						시군구 <input type="text" name="basic_addr" required>
						<br> 
						상  세 <input type="text" name="detail_addr" required> 
					</td>
				</tr>
			</table>
			
		<input type="button" value="뒤로가기" onclick="location.href='totalMemberList.jsp'">
 		<input type="submit" value="입력완료">
	
		</form>

이때 필수 입력만을 체크할때는 required를 사용하여 해줄 수 있다.

하지만 required에서 입력이 됐지만 내가 원하는 형식이 아닐때 자바스크립트에서 처리할때, 자바스크립트를 거치지 않고 submit으로 즉시 실행되어 버린다.

그래서 버튼을 이용해 onlclick 이벤트로 직접 js에서 submit을 해봤더니, required가 동작을 안한다.

이것은 동작 순서의 차이에 의해 required를 체크하기전에 js부터 실행을 해버려서 onclick 이벤트가 실행되지 않는 것이다.

이때, required와 onclick 이벤트를 함께 사용하려면?

form 태그에 onsubmit 속성을 지정해준뒤, 자바스크립트에서 onsubmit 속성을 true/false로 반환해주면 된다.

만약, onsubmit 속성이 false라면 action이 실행이 안되고, true라면 action이 실행된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	/* 올바르게 입력했을때만 submit버튼을 눌렀을때 action이 실행되어야 한다. => onsubmit 속성 */
	/* onsubmit = "return true"  => 전송됨 */
	/* onsubmit = "return false" => 전송안됨 */
	
	function whenSubmit(){
		/* 
		
		let id = document.getElementById('id')
		let pwd = document.getElementById('id') 
		

		if(id.value == ""){
			alert('아이디를 입력하세요')
			return false
		}
		
		*/
		
		/* form태그만 유일하게 name 속성을 통해서 접근할 수 있다. */
		
		// 아이디 입력체크 
		let f = document.inputForm
		
		if(f.id.value == ''){
			alert('아이디를 입력하세요')
			return false
		}
		
		// 아이디 중복체크
		if(f.pwd.value != f.pwdCheck.value){
			alert('패스워드가 서로 다릅니다.')
			return false
		}
		return true // onsubmit이벤트는 return true이면 전송되고, return false이면 전송이 안된다.
	}
	
</script>
</head>
<body>
	<form action="exam08.html" name="inputForm" onsubmit="return whenSubmit()">
		<!-- 
		아이디 : <input type = "text" name = "id" required> <br>
		패스워드 : <input type = "password" name = "pwd" required> <br>
		패스워드 확인 : <input type = "password" name = "pwdCheck" required> <br> 
		-->
		아이디 : <input type = "text" name = "id"> <br>
		패스워드 : <input type = "password" name = "pwd"> <br>
		패스워드 확인 : <input type = "password" name = "pwdCheck"> <br>
		<input type = "submit" value="전송"> 
	</form>
</body>
</html>

regex 패턴 체크

pattern 속성을 사용해서 제어할 수도 있다.

만약 4글자의 숫자만을 입력받고 싶다면?

<input type="text" name="tel2" pattern="[0-9]{4}" required >

regex 표현식을 통해 숫자를 제어해주면 된다.

참고