[JS] onsubmit 함수내에서 ajax 사용시 주의할 점

form 태그를 submit을 실행하기전 체크해야할 상황이 있을때 onsubmit 함수를 선언하여 사용합니다.

onsubmit 함수내에서 ajax 함수를 사용할 때 주의해야할 점이 있습니다.

 

onsubmit 함수에서 return false는 submit 액션을 실행하지 않는것을 의미하는데요.

이 return false를 ajax내에서 선언할시 submit 액션이 그대로 실행됩니다.

 

따라서 ajax내에서 flag 변수를 사용하여 조건에 따라 true / false 값으로 바꿔준 후 마지막에 return flag를 하셔야 원하는 결과를 이끌어내실 수 있습니다.

 

아래 코드는 form 태그를 검증하는 api를 호출하고 그 응답값이 false인 경우 submit을 못하게 해주는 함수입니다.

function validateForm() {
    var flag = true;
    var data = {result:true}
    $.ajax({
      type: "POST",
      url: "/api/formCheck",
      dataType: 'json',
      data: data,
      async: false,
      success: function (res) {
        if (!res.result) {
          var msg = '에러';
          alert(msg);
          flag = false;
        } else {
          flag = true;
        }
      }
    })
    return flag;
  }

위에 코드처럼 ajax 내에서 flag 값을 true나 false로 변경한 후 validateForm 끝에서 flag 를 반환하면 의도한 대로 동작하게 됩니다.

또한 ajax의 async: false 옵션을 추가하여 flag에 값이 제대로 반영되게 합니다.

 

참고

[1] https://www.w3schools.com/jsref/event_onsubmit.asp

[2] https://stackoverflow.com/questions/37949867/ajax-call-returns-true-after-returning-false-and-form-submits

ajax call returns true after returning false and form submits