[JavaScript] form input 값 없을 때 submit 금지

1. form 태그 내에 함수 return 값 주기

<form action="search.html" onsubmit="return doAction();">   
        <input type="text" name="msg" id="msg">
        <button>확인</button>
</form>

<script>
	function doAction() {
            let msgEle = document.getElementById("msg");
            // msgEle.value의 입력값이 있을 경우에는 페이지를 이동
            //                        없을 경우에는 submit 동작을 취소시킨다.
            if(msgEle.value.length == 0) {  // 입력값 없는 경우
                // 이동시키지 않는다.
                alert('메세지를 입력하세요');
                // 중단
                return false;
            }
            // 페이지 이동 - 서브밋 진행...
            return true;
        }
</script>

 

2. form 태그 내에 id 주고 script 내에서 .addEventListener과 이벤트객체 e 사용

<form action="search.html" id="searchForm">   
        <input type="text" name="msg" id="msg2">
        <button>확인</button>
</form>

<script>
 	let sf = document.getElementById("searchForm");
        sf.addEventListener("submit", function(e){
            let msgEle = document.getElementById("msg2");
            if(msgEle.value.length == 0) {  // 입력값 없는 경우
                alert('메세지를 입력하세요');
                e.preventDefault();	// 여기서 이벤트 중단
            }
        });
</script>