유효성 검사 툴팁 (innerHTML)

%% 드리프트의 openAPI v 0.000001 %%

1) BaloonToolTip v0.8 - 자바스크립트 모듈화 하라고 해서 자바 메서드처럼 표현해 봤음
    친절하게도 사용하실 수 있는 말풍선 이미지도 첨부함 - -ㅋ 포토샵으로 직접 이뿌게 그렸삼

void checkLength(Object, int limit, String messageHead){
   ~~~ examine validation & printout to that document & so on... Blah Blah ~~~
}

퍼갈때는 댓글을 남겨주셈

1. CSS단

#ssnMessage{
 z-index:0;
 position : absolute;
 float: left;
 padding: 4px 8px 0px; 
 width:190px;
 height:43px;
 font-weight:bold;
 color: #ff0000;
 text-align: center;
 background: url(../images/login/baloon.gif) no-repeat;
}

2. 헤드의 자바스크립트 단

function checkLength(obj,charLength,msg){   // 매개인자 : 1.해당 폼(text) 객체, 2. 유효문자 길이, 3. 출력 메세지 '목적어' 혹은 '주어'
 
 var x1 = event.screenX;
 var x2 = event.offsetX;
    var x3 = x1-x2-70;
   
    var y1 = event.screenY;
    var y2 = event.offsetY;
    var y3 = y1-y2-280;
   
 var messageArea = document.getElementById("ssnMessage");
  messageArea.style.left = x3;
  messageArea.style.top = y3;
 
    if(obj.value==''){
     var newMsg;
     var msgLength = msg.length;
     var lastChar = msg.substr(msg.length-1,1);
    
     if(lastChar=='은'){
      newMsg = msg.replaceAll( "은", "을" );
     }else{
     newMsg = msg.replaceAll( "는", "를" );
    }
    messageArea.style.display = "block";
     messageArea.innerHTML = newMsg+" 입력하세요 !"; 
   
     return;
 }else if(obj.value.length<charLength){
  messageArea.style.display = "block";
     messageArea.innerHTML = msg+" "+charLength+"자 이상입니다 !"; 
     return;
 }else{
  messageArea.style.display = "none";
  messageArea.innerHTML = "";
 }
}

3. BODY 단 (실제 사용)

 <th>* 아이디(ID)</th>
                <td class="con""> ※ 3~15자의 영문소문자, 숫자만 가능 합니다.<br>
                 <html:text property="memberInfo.userId" style="width:170px;ime-mode:disabled" styleClass="type-text-c" onblur="ajaxValidID(this);checkLength(this,3,'아이디는');" maxlength="15" tabindex="1"/>