이미지 버튼으로 summit 버튼 누를때 보내기전 에러확인하기

2010. 11. 11. 02:31웹/Html/Javascript/Css

<script>
function err() {
        if (document.getElementById("sub1").value == "") {
            alert("1번폼 내용입력해주세요");
            return false;
  }else if (document.getElementById("sub2").value == "") {
            alert("2번폼 내용입력해주세요");
            return false;
  }else if (document.getElementById("sub3").value == "") {
            alert("3번폼 내용입력해주세요");
            return false;
  }else
   return true;
}
</script>

<form name="form1" method="post" action="주소" onsubmit="return err();">
<input id="sub1" type="text" name="form1" size="64" maxlength="40"><br>
<input id="sub2" type="text" name="form2" size="64" maxlength="40"><br>
<input id="sub3" type="text" name="form3" size="64" maxlength="40"><br>
<input type="image" src="이미지주소" alt="보내기">
</form>

이미지버튼은 클릭시 폼내용을 바로 전송하므로 이미지 버튼자체에 onClick이벤트를
넣어도 에러 메시지를 띄우지 않는다
그래서 폼 자체에 summit시 함수를 검사하는 이벤트를 넣어
에러를 검사한다.