[JavaScript] 자바스크립트로 form 태그의 input 검증(validation) 후에 수동으로 submit 처리하기
JavaScript 2019. 7. 27. 16:27자바스크립트로 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> |
cs |
form 태그의 로그인 button에 onClick 이벤트의 핸들러로 login() 함수를 연결해두었습니다. 로그인 버튼을 클릭하게 되면 <script>태그에 선언되어있는 login()함수가 핸들러로 호출됩니다.
|
<input type="button" onclick="login()" value="로그인"> |
cs |
핸들러로 사용한
login()함수입니다. document 객체를 이용해 loginForm을 조작합니다. DOM을 이용하면 name 속성을 통해 쉽게 접근할 수 있습니다. javascript에서는 값이 0, undefined, null, 공백인 경우 false로 처리하는 특성이 있기때문에 not을 의미하는 !연산자를 이용하여 입력 여부를 판단하였습니다. |
function login(){
var loginForm = document.loginForm;
var userId = loginForm.userId.value;
var password = loginForm.password.value;
if(!userId || !password){
alert("아이디와 비밀번호를 모두 입력해주세요.")
}else{
loginForm.submit();
}
} |
cs |
값이 하나라도 입력되지 않은 경우
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 |
cs |
'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 |
도로락
IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그