SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    javascript display inline validation error

    hi

    does anyone has a link to tutorial which show
    how to display javascript form validation error near the input field without jquery.

    vineet

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .warning {
      position:absolute;z-Index:101;width:120px;height:20px;background-Color:red
    }
    
    /*]]>*/
    </style></head>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Validate(){
     var frm=document.forms[0],el,pass,rtn=true;
     el=frm['txt'];
     Warning(el,'');
     if (el.value==''){
      Warning(el,'please complete');
      rtn=false;
     }
     el=frm['rad'];
     Warning(el[1],'');
     pass=false;
     for (var z0=0;z0<el.length;z0++){
      if (el[z0].checked){
       pass=true;
      }
     }
     if (!pass){
      Warning(el[1],'check one');
      rtn=false;
     }
     alert(rtn);
     return rtn;
    }
    
    function Warning(obj,txt){
     var w=Warning[obj.name],p=pos(obj);
     if (!w){
      w=document.createElement('DIV');
      w.className='warning';
      document.body.appendChild(w);
      Warning[obj.name]=w;
     }
     w.style.left=(txt?p[0]+obj.offsetWidth+5:-3000)+'px';
     w.style.top=p[1]+'px';
     w.innerHTML=txt;
    }
    
    function pos(obj){
     var rtn=[0,0];
     while(obj){
      rtn[0]+=obj.offsetLeft;
      rtn[1]+=obj.offsetTop;
      obj=obj.offsetParent;
     }
     return rtn;
    }
    
    /*]]>*/
    </script>
    <body>
    <form  onsubmit="return Validate();">
    <input name="txt" />
    <br />
    <input type="radio" name="rad" /><input type="radio" name="rad" />
    <br />
    <input type="submit" name="" value="Submit"/>
    </form>
    </body>
    
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •