[JavaScript] 자바스크립트로 form 태그의 input 검증(validation) 후에 수동으로 submit 처리하기
자바스크립트로 form 태그의 input 검증(validation) 후에 수동으로 submit 처리하기
기본적으로 <form> 태그를 사용하여 입력한 데이터를 웹서버로 전송할때 <input> 태그의 type="submit"을 통해 전송버튼을 만들어 사용합니다.
input submit의 경우 form 안에 있는 모든 input의 value를 전송하게 되는데, 이경우 각 input에 값이 입력되었는지 등의 여부를 검증(validation)할 수 없습니다.
따라서 이 경우 <input type="button"> 으로 버튼을 하나 만들고 onClick 이벤트를 직접 핸들링하여, 버튼을 클릭했을 때 각 입력값을 검증한 후 수동으로 submit 처리 해주어야 합니다.
예제
다음은 form의 입력값을 검증하고 수동으로 submit 처리하는 예제입니다. git링크
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
<script type="text/javascript">
function login(){
var loginForm = document.loginForm;
var userId = loginForm.userId.value;
var password = loginForm.password.value;
if(!userId || !password){
alert("아이디와 비밀번호를 모두 입력해주세요.")
}else{
loginForm.submit();
}
}
</script>
</head>
<body>
<form name="loginForm" action="http://localhost/login" method="post">
계정 : <input type="text" name="userId"><br>
비밀번호 : <input type="password" name="password"><br>
<input type="hidden" name="loginType" value="admin">
<input type="button" onclick="login()" value="로그인">
</form>
</body>
</html>
form 태그의 로그인 button에 onClick 이벤트의 핸들러로 login() 함수를 연결해두었습니다. 로그인 버튼을 클릭하게 되면 <script> 태그에 선언되어있는 login() 함수가 핸들러로 호출됩니다.
function login(){
var loginForm = document.loginForm;
var userId = loginForm.userId.value;
var password = loginForm.password.value;
if(!userId || !password){
alert("아이디와 비밀번호를 모두 입력해주세요.")
}else{
loginForm.submit();
}
}
핸들러로 사용한 login() 함수입니다. document 객체를 이용해 loginForm을 조작합니다. DOM을 이용하면 name 속성을 통해 쉽게 접근할 수 있습니다. javascript 에서는 값이 0, undefined, null, 공백인 경우 false로 처리하는 특성이 있기때문에 not을 의미하는 ! 연산자를 이용하여 입력 여부를 판단하였습니다.
값이 하나라도 입력되지 않은 경우 alert() 를 이용해 경고를 띄우고 모두 입력된 경우 form 객체의 submit() 메서드를 실행합니다. submit() 메서드는 이미 브라우저에 정의되어 있는 메서드로 실제 input type="submit"이 클릭 되었을 때 실행되는 메서드입니다.
테스트
값을 하나라도 입력하지 않고 로그인 버튼을 클릭하면 경고창이 나타납니다.
모두 입력한 경우에는 경고창이 나타나지 않고 submit() 이 실행되고 action 속성에 정의된 경로로 HTTP 요청을 수행합니다.
예제이므로 웹서버가 준비되어 있지 않아 이후 내용은 별다른게 없습니다.
HTTP 요청 메시지를 분석해보면 입력한 내용들이 잘 전송된것을 볼 수 있습니다. 여기서 눈여겨 볼 점은 input type="hidden" 으로 선언되어 있던 input의 value 값 또한 전송이 된다는 점 입니다.
POST http://localhost/login HTTP/1.1
Host: localhost
Proxy-Connection: keep-alive
Content-Length: 44
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
Origin: null
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
Accept-Encoding: gzip, deflate, br
Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7
userId=dololak&password=1234&loginType=admin
'JavaScript' 카테고리의 다른 글
| [jQuery] 제이쿼리 $.each() 함수 100% 활용하기! (1) | 2019.12.16 |
|---|---|
| [JavaScript] button 태그에서 a 태그처럼 href 설정하여 링크 이동하기 (0) | 2019.11.29 |
| [JavaScript] 자바스크립트의 자료형(Data Type) (0) | 2019.06.05 |
| [JavaScript] JavaScript란? 자바스크립트 언어 설명 및 탄생배경 및 특징 (0) | 2019.06.03 |
| [jQuery] data-xx 속성을 추가해주는 data()함수에 대해 (0) | 2018.12.17 |
도로락
WriterIT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그