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> alert(obj.innerText+" 입력 하지 않으셨습니다."); |