자바스크립트로 form 태그의 input 검증(validation) 후에 수동으로 submit 처리하기
기본적으로 <form>태그를 사용하여 입력한 데이터를 웹서버로 전송할때 <input>태그의 type="submit"을 통해 전송버튼을 만들어 사용합니다.

input submit의 경우 form 안에 있는 모든 inputvalue를 전송하게 되는데, 이경우 각 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 태그의 로그인 buttononClick 이벤트의 핸들러로 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

블로그 이미지

도로락

IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그

댓글을 달아 주세요! 질문 환영합니다!