스티브홍쓰

[자바스크립트]LABEL 태그를 이용한 유효성 체크 본문

자바스크립트/자바스크립트

[자바스크립트]LABEL 태그를 이용한 유효성 체크

프로그 2010. 5. 28. 19:13

LABEL 태그를 이용한 유효성 체크

 

아래의 소스는 LABEL을 이용한 유요성 체크를 위한 샘플 소스입니다.

LABEL 태그에는 FOR라는 속성을 통하여 정의하고 있는 FORM 개체의 ID를 가지고 있습니다.

 

<LABEL FOR="USERNAME">성명</LABEL>
<SPAN><INPUT TYPE=TEXT NAME="USERNAME" ID="USERNAME"></SPAN>

이를 이용하여 LABEL태그 기반으로 하는 유효성체크 함수를 아래와 같이 만들 수 있습니다.

 

function validTest(){
   var tagArray = document.getElementsByTagName("LABEL");
   for(i=0;i<tagArray.length;i++){
    var obj = tagArray[i];
    
    if(obj.htmlFor != "" && typeof(obj.htmlFor) != "undefined" && obj.htmlFor != "undefined" && document.getElementById(obj.htmlFor).value == "" ){

     alert(obj.innerText+" 입력 하지 않으셨습니다.");
     document.getElementById(obj.htmlFor).focus();
    
     return false;
    }

간단하게 설명하면 getElementsByTagName을 이용하여 LABEL을 셀렉트 한후 각 LABEL의 FOR속성의 ID값을 추출해서

FORM 요소의 VALUE값을 체크하는 로직입니다.

 

간단한 샘플이지만 이를 이용한다면 간단하고도 유용한 유효성체크가 가능할 것으로 생각되며 많은 분들이 의미있는 태그기반의 자바스크립트 소스를 만드는데 조그만 보탬이 되었으면 합니다.

 

 

 

 <HTML>
<HEAD>
 <SCRIPT>
  function validTest(){
   var tagArray = document.getElementsByTagName("LABEL");
   for(i=0;i<tagArray.length;i++){
    var obj = tagArray[i];
    
    if(obj.htmlFor != "" && typeof(obj.htmlFor) != "undefined" && obj.htmlFor != "undefined" && document.getElementById(obj.htmlFor).value == "" ){

     alert(obj.innerText+" 입력 하지 않으셨습니다.");
     document.getElementById(obj.htmlFor).focus();
    
     return false;
    }

    
    
   }
  }
 </SCRIPT>
</HEAD>
<BODY>
 <DIV>
  <FIELDSET>
   <LEGEND>유효성체크</LEGEND>
   <FORM onSubmit="return validTest()">
    <LABEL FOR="USERNAME">성명</LABEL>
    <SPAN><INPUT TYPE=TEXT NAME="USERNAME" ID="USERNAME"></SPAN>
    <LABEL FOR="TEL">전화번호</LABEL>
    <SPAN><INPUT TYPE=TEXT NAME="TEL" ID="TEL"></SPAN>
    <LABEL FOR="COMPANY">회사명</LABEL>
    <SPAN><INPUT TYPE=TEXT NAME="COMPANY" ID="COMPANY"></SPAN>
    <BUTTON TYPE="SUBMIT">저장</BUTTON>
   </FORM>
  </FIELDSET>
 </DIV>
</BODY>
</HTML>


저작자표시비영리변경금지
Tag
, ,
공유하기 링크
'자바스크립트/자바스크립트' Related Articles more
0 Comments
댓글쓰기 폼
Prev 1 2 3 4 5 Next