자바스크립트에 form 매개변수로 보낼때.. (필수정보 누락 막기)

바보같은 실수함..

form 안에 있는 전송버튼 태그에다가 onclick="check(this); return false;" 이렇게 써놓고 스크립트 태그 안에서 

<script>
	function check(form) {
		
		alert('확인 버튼 눌림');
		
		if(form.loginPW.value.trim().length == 0) {
			alert('비밀번호를 입력해주세요.');
			form.loginPW.focus();
			return;
		}
		
		form.submit();
	}
</script>

이렇게 썼는데 비밀번호 안 써도 체크 안 하길래 왜 이러지 했는데 button 태그에 걸어놓으니까 그런거였음...

form 태그에 직접 onsubmit으로 걸어야함!!!!

<form action="membermodify" onsubmit="check(this); return false;">
    <input type="hidden" name="id" value="${member.id }"/>
    <div class="table-box-type-1 overflow-x-auto">
    <div>비밀번호 확인</div>
            <table border="1" class="mx-auto able w-full bg-gray-100">
            <colgroup>
                <col width="200"/>
                <col width="600"/>
            </colgroup>
            <tr>
                <th>로그인 아이디</th>
                <td>${member.loginID }</td>
            </tr>
            <tr>
                <th>로그인 비밀번호</th>
                <td><input class="input input-bordered input-success w-full" type="text" name="loginPW" 
                placeholder="로그인 비밀번호를 입력해주세요."/></td>
            </tr>
        </table>
    </div>
    <div class="flex justify-end">
        <button class="btn btn-success mr-2" >확인</button>
        <button class="btn btn-success" type="button" onclick="history.back();">뒤로</button>
    </div>
</form>

이렇게!!

언젠가 또 할 실수 같아서 적어놓기.. 아 아까도 스크립트 뭐 안 됐는데 설마 이거 때문인가;;;

아 그리고 참고로

필수정보 입력 하는데에는 세가지 방법이 있는데

1. controller에서 막기 - input 태그로 모든 값을 보내줘야됨. 이미 전송하고 나서 서버단에서 판단하는 것임. 그래서 원래 있던 페이지가 비워지고 알림창이 새롭게 나옴!!

2. javascript에서 막기 - 새로운 페이지로 넘어가기 전에(전송하기 전에) 막아주는 것임!! 현재 페이지 그대로 있고 그냥 그 위로 알림창만 하나 덧씌워져서 나옴

3. input태그에 required 써주기!! - 이게 제일 간단하긴 함!! 인풋 태그 밑에 필수정보입니다 뭐 이렇게 나와서 전송 버튼 눌러도 안 전송됨.