자바스크립트 javascript form onsubmit 양식 제출 되는 문제.

HTML form의 submit 문제는 여러가지 이유에서 발생한다.
form.submit(); return true; 라고 했을 때 두번 submit 되는 문제도 있고, 이것 저것 많다.
이번 포스팅에서는 폼의 onsubmit 함수 안에서 문제가 발생했을 때를 보고자 한다.

아래는 일반적인 onsubmit 속성을 가지고 있는 form과 그 함수이다.

<form onsubmit="return MGY_submit(this);">
    <input type="text" id="value1">
    <input type="image" value="submit">
</form>

function MGY_submit(f){
    var _str = $("#value2").val().substr(0, 4);
    if( _str && _str != "" ){
        return true;
    }
    alert( "빈칸은 안되요" );
    return false;
}

예제 적다 보니 생각난 건데, image input이 form 안에 있을 경우 submit 버튼과 같은 역할을 해버려서 가끔 문제가 생긴다.

아무튼, 버튼을 누르면 form이 submit 하게 되면서 MGY_submit() 함수를 호출한다.
이 함수에서 true 반환하면 정상적으로 submit 하게 되고, false 를 반환하면 submit 되지 않는다. 제자리에 머문다.

MGY_submit() 함수를 보면 문제가 하나 있다. jquery를 이용해 input을 id값으로 참조해 value를 가져오는데, id가 value2 인 input은 form안에 존재하지 않는다. 이런 경우 어떻게 될까?

존재하지 않는 객체를 참조하여 value를 반환하는 함수 val()을 호출 했다. 그리고 그 값에서 일정 부분 추출하는 substr() 함수를 사용했다. 허공에 문자열을 추출하려 했으므로 에러가 나는 시점이다. _str 변수 안에는 값이 들어오지 않았다. 선언과 동시에 초기화가 되는 순간에 에러가 발생했다. 에러 발생 후의 자바스크립트는 더 이상 다음 코드를 실행하지 않는다. if 문은 실행되지 않는다.

그럼 리턴값을 기다리고 있는 form에게 가는 값은 무엇일까? true가 간다.
_str 이 초기화도 안되고, 값도 들어가지 않았다. if문을 통과할 수가 없는데, 심지어 alert()도 반응하지 않고 form은 submit 된다. 왜 그러냐고? 나도 모른다. form의 onsubmit 함수 실행 중에 에러나면 form이 submit 돼버리더라. 라고 기억해 놓으면 언젠가 도움이 된다.

그럼 어떻게 하면 좋을까? try - catch 구문을 사용하자.

function MGY_submit(f){
   try{
      var _str = $("#value2").val().substr(0, 4);
      if( _str && _str != "" ){
          return true;
      }
      else {
          alert( "빈칸은 안돼요" );
          return false;
      }
   } 
   catch ( error ){
      alert( error );
      return false;
   }
}

try 구문 안에서 문법적 에러가 발생하면, catch 부분의 코드가 실행된다. try - catch는 예상치 못한 에러로 프로그램이 비정상적으로 종료되거나 하는 상황을 예방 할 수 있는 아주 좋은 안전 장치다.

캡쳐할때 당시엔 match() 함수를 사용했었다. 에러를 출력해주고 제자리에서 머물게 된다. form은 submit 되지 않는다. form이 잘못 submit 되었을 경우에, DB 등 상황이 곤란해질 우려가 있으므로 신중하게 처리해 주는 편이 좋겠다.

가끔은 아니 자주, 컴퓨터가 말을 좀 했으면 좋겠다.