onsubmit: form 전송 전 검증 방법

form 태그에 input type="text"가 하나면, input 태그에서 엔터를 쳤을 때 submit이 발생한다.

<form method="POST" action="/login/code">
    <input type="text"name="code" maxlength="6" />
    <button onclick="formSubmit()" type="button">인증</button>
</form>

<script>
    function formSubmit() {
    	const form = document.querySelector('form');
    	const code = document.querySelector('input').value;
        
        if (code.length >= 6) {
        	form.submit();    
        }
    }
</script>

위 코드처럼 인증번호를 전송하기 전에 유효성를 하고 서버로 넘겨야 하는데 엔터를 쳐버리면 바로 submit이 되버린다.

form 태그 이벤트 중 onsubmit을 이용하면 submit 전에 필요한 작업을 수행할 수 있다.

 

<form onsubmit="return isValidCode()" method="POST" action="/login/code">
    <input type="text"name="code" maxlength="6" />
    <button onclick="formSubmit()" type="button">인증</button>
</form>

<script>
    function formSubmit() {
    	const form = document.querySelector('form');
        
        if (isValidCode()) {
        	form.submit();
        }
    }
    
    function isValidCode() {
    	// 유효성 검사,,,
    	const code = document.querySelector('input').value;
        return code.length < 6;
    } 
</script>

boolean이 반환 되는 함수 앞에 return을 붙일 시 true이면 submit을 수행하고 false일 경우 submit을 수행하지 않는다.

엔터를 쳤을 때와 버튼을 눌렀을 때 둘 다 유효성 검사 후 submit을 할 수 있다.