HTML 엔터키(Enter Key)를 통한 form객체의 Submit 방지

###############################################

# 참고사항 : 다음 블로그의 XSS 방지 기능으로 인해         #

#                온클릭이나 온키프레스 속성에 언더바(_)가    #

#                자동으로 삽입됩니다. 참고바랍니다.             #

# #############################################

---

아래와 같은 HTML 소스코드가 있다고 가정합니다.

<form name="sendform" method="get" action="proc.jsp">

     <input type="text" name="keyword" value="이곳에 포커스를 맞춘 후 엔터키를 눌러보세요."/>

     <input type="submit" value="전송" />

</form>

여기서 Input Text 객체에 마우스를 클릭하셔서 포커스가 해당 객체를 가르키도록 한 후에 키보드의 엔터키(Enter)를 눌르시면 form이 action 속성에서 가르키는 proc.jsp로 Submit 이 되는 것을 보실 수 있습니다.

그런데 편리할 것 같은 이러한 기능은 Submit 하기 전에 사용자가 입력한 내용을 자바스크립트로 먼저 체크하는 동작을 할 수 없다.는 문제를 가지고 있습니다. 설사 체크를 했다 하더라도 사용자가 부적합한 내용을 입력했을 때 Submit이 되지 말아야 하는데, 자동으로 Submit이 되어버리죠.

아마도 이 글을 읽고 계신 분도 이러한 문제로 고민하고 계실거라고 생각합니다. 이것을 해결하는 방법은 생각보다 간단합니다. 다른 많은 블로그나 사이트에서 쉽게 찾을 수 있는 방법인데요, 그것은 form 태그의 onsubmit 속성에 return false; 문장을 넣는 것입니다. 그리고 자바스크립트로 체크하는 부분에서 해당 form의 submit() 메소드를 호출하는 방법입니다.

아래 소스코드와 같이 수정하시면 됩니다.

---- 자바스크립트 소스코드 ----

function formCheck()

{

     var str_keyword = window.sendform.keyword.value;

     if(!str_keyword || str_keyword == "")

     {

          window.alert("검색어를 입력해주시기 바랍니다.");

          window.sendform.keyword.focus();

          return;

     }

     

     window.sendform.submit();

}

---- HTML 소스코드 ----

<form name="sendform" method="get" action="proc.jsp" onsubmit="return false;">

     <input type="text" name="keyword" value="이곳에 포커스를 맞춘 후 엔터키를 눌러보세요."

            onkeypress="if(event.keyCode == 13) formCheck();"/>

     <input type="submit" value="전송" onclick="formCheck();" />

</form>

혹은 위 소스코드를 개선하여 아래와 같이 작성하셔도 됩니다.

---- 자바스크립트 소스코드 ----

function formCheck()

{

     var str_keyword = window.sendform.keyword.value;

     if(!str_keyword || str_keyword == "")

     {

          window.alert("검색어를 입력해주시기 바랍니다.");

          window.sendform.keyword.focus();

          return false;

     }

     

     window.sendform.submit();

}

---- HTML 소스코드 ----

<form name="sendform" method="get" action="proc.jsp" onsubmit="return formCheck()">

     <input type="text" name="keyword" value="이곳에 포커스를 맞춘 후 엔터키를 눌러보세요."/>

     <input type="submit" value="전송"/>

</form>

함수 내에서 반환된 false값을 onsubmit에서 다시 return하는 방식입니다. 결과는 같고, 소스코드가 좀 더 간결해진 것을 알 수 있습니다.

---

이제부터 잘못된 소스코드의 예를 보겠습니다. (제가 실수했던 경험을 바탕으로 적었습니다.)

---- 자바스크립트 소스코드 ----

function formCheck()

{

     var str_keyword = window.sendform.keyword.value;

     if(!str_keyword || str_keyword == "")

     {

          window.alert("검색어를 입력해주시기 바랍니다.");

          window.sendform.keyword.focus();

          return;

     }

     

     window.sendform.submit();

}

---- HTML 소스코드 ----

<form name="sendform" method="get" action="proc.jsp" onsubmit="return false; formCheck();">

     <input type="text" name="keyword" value="이곳에 포커스를 맞춘 후 엔터키를 눌러보세요."/>

     <input type="submit" value="전송"/>

</form>

"위 소스코드 처럼 작성하면 되지 않나?" 라고 생각하신 분들이 있을지도 모릅니다. 결론을 말씀드리면 위와 같은 소스코드는 동작하지 않습니다. 

이유는 onsubmit 속성에서 return false; 가 먼저 오고 formCheck() 함수가 뒤에 왔기 때문에 return false; 문장에 의해서 뒤에 formCheck() 함수가 호출되지 않는 것입니다. (이미 리턴값을 받았기 때문에 onsubmit 에 대응되는 자바스크립트 동작이 끝난 것으로 인식하는 것이죠.)

따라서 위 소스코드를 아래와 같이 작성하셔야 합니다.

<form name="sendform" method="get" action="proc.jsp" onsubmit="formCheck(); return false;">

     <input type="text" name="keyword" value="이곳에 포커스를 맞춘 후 엔터키를 눌러보세요."/>

     <input type="submit" value="전송"/>

</form>

---

그 다음, 아래의 잘못된 소스코드를 보겠습니다.

---- 자바스크립트 소스코드 ----

function formCheck()

{

     var str_keyword = window.sendform.keyword.value;

     if(!str_keyword || str_keyword == "")

     {

          window.alert("검색어를 입력해주시기 바랍니다.");

          window.sendform.keyword.focus();

          return false;

     }

     

     window.sendform.submit();

}

---- HTML 소스코드 ----

<form name="sendform" method="get" action="proc.jsp" onsubmit="formCheck();">

     <input type="text" name="keyword" value="이곳에 포커스를 맞춘 후 엔터키를 눌러보세요."/>

     <input type="submit" value="전송"/>

</form>

함수 내에서 false값을 반환했지만 onsubmit에서 함수가 반환한 값을 다시 return 하지 않는 경우입니다. 이럴 경우 함수가 반환된 값은 무용지물이 되고, alert로 메시지는 출력하지만 결과적으로 submit을 막지 못하는 현상이 발생합니다. 따라서 아래와 같이 수정하셔야 합니다.

[수정된 form 태그의 일부분]

... onsubmit="return formCheck()">