폼을 전송하기 전에, 자바스크립트에서 특정 작업을 수행 후 전송여부를 결정하고 싶을 때가 있다.
- JavaScript에서 validation을 한 후, 유효한 경우에만 전송을 허용 한다던가
- 사용자에게 질의 후 응답 여부에 따라 폼 전송을 할지/말지 결정 한다던가
가능한 방법은 여러가지가 있겠지만, 아래 두 가지만 알아보도록 하겠다.
1. form의 onsubmit 이벤트 활용
onsubmit은, form 태그 안에서 form전송을 하기 전에 입력된 데이터의 유효성을 체크하기 위해 사용하는 이벤트이다.
onsubmit='return false' 이면 전송을 하지 않고 / onsubmit='return true' 이면 폼 전송을 한다.
아래와 같이 onsubmit에 특정 함수 결과를 리턴하도록 정의해주면, 함수의 리턴 결과에 따라 폼 전송을 막거나/허용할 수 있다.
onsubmit="return validateForm(this.form);"
form의 submit 버튼이 눌리면 > onsubmit 에 명시한 함수가 먼저 호출되고 > 그 함수 리턴값에 따라 전송 여부가 결정되는 것이다.
함수 안에서 validation을 하고 문제 없으면 true를 리턴해서 폼 전송을 허용하고, 그렇지 않으면 false를 리턴해서 전송을 막으면 된다.
<script type="text/javascript">
function validateForm(form) {
if (confirm('폼의 값을 전송할까요?')==1)
{
return true;
}
return false;
}
</script>
<form onsubmit="return validateForm(this.form);">
<p>
<label for="mail">
<span>Please enter an email address:</span>
<input type="email" id="mail" name="mail" required minlength="8">
<span class="error" aria-live="polite"></span>
</label>
</p>
<button>Submit</button>
</form>
2. form의 submit 이벤트에 eventListener 등록
html 코드를 건드릴 필요 없이, javascript에서 addEventListener를 통해 해당 form의 submit 이벤트 발생 시 실행할 함수를 등록할 수도 있다.
submit 이벤트가 발생하면 > submit 이벤트에 등록한 함수가 먼저 호출되고 > 함수 실행이 완료된 후 폼 전송이 진행된다.
이 때, 함수 안에서 폼 전송여부를 컨트롤 할 수 있다.
- 전송을 중지하고 싶은 경우 : 함수 안에서 event.preventDefault();를 호출하면 폼 전송이 이루어지지 않는다.
- 그 외의 경우엔, 함수 실행이 끝난 후 자동으로 폼이 전송된다.
<script type="text/javascript">
const form = document.getElementsByTagName('form')[0];
form.addEventListener('submit', function (event) {
if (confirm('[event] 폼의 값을 전송할까요?')==0)
{
alert('전송을 중지합니다.');
// 이벤트를 취소해서 폼 전송을 막음
event.preventDefault();
}
});
</script>
<form>
<p>
<label for="mail">
<span>Please enter an email address:</span>
<input type="email" id="mail" name="mail" required minlength="8">
<span class="error" aria-live="polite"></span>
</label>
</p>
<button>Submit</button>
</form>