form validate onsubmit

html 에서 form 을 사용할 때 "저장" 버튼에 해당하는 부분의 코드를 type="submit" 을 사용해야 한다.

<button type="submit">Save</button>

물론 type 을 submit 이 아닌 “button” 으로 구현해도 된다. 하지만 submit type이 아닐 경우에 input filed 들에서 키보드 “enter” 를 눌렀을 경우 submit 핸들러가 응답을 하지 않는다.

validation

form 에서 validation 을 확인 후 submit 을 제한하고 싶은 경우 "onsubmit" 이벤트를 이용하면 된다.

<form action="/user" method="post" id="userForm">
    <input type="text" name="firstname" id="firstname" />
    <input type="text" name="lastname" id="lastname" />
    <button type="button">cancel</button>
    <button type="submit">save</button>
</form>

위 예제에서 저장버튼을 클릭하면 /user API 가 호출되고 사용자가 새로 등록될 것이다.

하지만 firstname 과 lastname 필드의 유효성을 체크하기 위해서는 위 코드만으로는 부족하다.

validateForm = () => {
    const $firstname = $('#firstname');
    if (!$firstname.val()) {
        alert('이름을 입력해주세요.');
        $firstname.focus();
        return false;
    }
    
    const $lastname = $('#lastname');
    if (!$lastname.val()) {
        alert('성을 입력해주세요.');
        $lastname.focus();
        return false;
    }
    
    return true;
}

<form ... onsubmit="return validateForm();" >
    ...
</form>

form 의 onsubmit 이벤트에 유효성 체크 함수를 호출하여 submit 을 제한할 수 있다. 이 때 주의할 점은 꼭 return 을 작성해주는 것이다.

onsubmit=”return function_name();”

return 을 작성하지 않으면 validateForm 함수의 결과가 form 으로 전달이 되지 않는다.

submit 핸들러

form 의 submit 핸들러를 활용하면 API 호출 및 동작에 대해 작성할 수 있다.

$('#userForm').on('submit', (e) => {
  
  ...
  // code
});

submit 핸들러에서 만약 페이지의 submit 이 발생되지 않게 (refresh..) 하는 방법은 아래 두가지가 있다.

return false

$('#userForm').on('submit', (e) => {
  
  ...
  // code
  
  return false; // submit not work
});

e.preventDefault()

$('#userForm').on('submit', (e) => {
  e.preventDefault();
  
  ...
  // code
});

e.preventDefault() 방식으로 할 경우 개발자가 좀 더 자유로워진다. api 호출 결과 등에 따라 페이지 전환 및 여러 처리가 가능하기 때문이다.

---

1. .submit() : https://api.jquery.com/submit/