Results 1 to 3 of 3

Thread: Javascript to check req fields on button click

  1. #1
    Join Date
    Dec 2007
    Posts
    88
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Javascript to check req fields on button click

    Good day, I urgently need help.

    I need to check all fields have values on click of button.

    The button already has a command but i need to check / run through the page for required fields.

    On find a blank required field then display message else continue with button next command.

    If possible, maybe something that continues check on the form & display text this is required before making button visibe?

    I need to get this going else my project is screwed.

    Regards

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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>
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    function Verify(){
     var check=zxcByClassName('required');
     for (var mess=['Please Complete'],z0=0;z0<check.length;z0++){
      if (check[z0].value.replace(/\s/g,'').length==0){
       mess.push(check[z0].title||check[z0].name);
      }
     }
     if (mess.length>1){
      alert(mess.join('\n'));
      return false;
     }
     return true;
    }
    
    function zxcByClassName(nme,el,tag){
     if (typeof(el)=='string') el=document.getElementById(el);
     el=el||document;
     for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
      if(reg.test(els[z0].className)) ary.push(els[z0]);
     }
     return ary;
    }
    
    
    /*]]>*/
    </script></head>
    
    <body>
    <form name="f1" >
    <input class="required" name="name" /><br />
    <input name="tb1" /><br />
    <input title="Name 2"class="required" name="tb1" /><br />
    <input type="button" name="" value="Test" onclick="Verify();"/>
    </form>
    </body>
    
    </html>
    or

    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>
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    function Verify(){
     var check=zxcByClassName('required');
     for (var mess=['Please Complete'],z0=0;z0<check.length;z0++){
      if (check[z0].value.replace(/\s/g,'').length==0){
       mess.push(check[z0].title||check[z0].name);
      }
     }
     var warning=document.getElementById('Warning');
     warning.style.display='block';
     if (mess.length>1){
    //  alert(mess.join('\n'));
      return false;
     }
     warning.style.display='none';
     return true;
    }
    
    function zxcByClassName(nme,el,tag){
     if (typeof(el)=='string') el=document.getElementById(el);
     el=el||document;
     for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
      if(reg.test(els[z0].className)) ary.push(els[z0]);
     }
     return ary;
    }
    
    function zxcEventAdd(o,f,e,p) {
     if ( o.addEventListener ){ o.addEventListener(e,function(ev){ return f(ev,p);}, false); }
     else if ( o.attachEvent ){ o.attachEvent('on'+e,function(ev){ return f(ev,p); }); }
     else {
      var prev=o['on'+e];
      if (prev){ o['on'+e]=function(ev){ prev(ev); f(ev,p); }; }
      else { o['on'+e]=f; }
     }
    }
    
    
    function zxcEvt(){
     var check=zxcByClassName('required');
     for (var z0=0;z0<check.length;z0++){
      zxcEventAdd(check[z0],Verify,'blur');
      zxcEventAdd(check[z0],Verify,'keyup');
     }
    }
    
    
    
    /*]]>*/
    </script></head>
    
    <body onload="zxcEvt()">
    <form name="f1" >
    <input class="required" name="name" /><br />
    <input name="tb1" /><br />
    <input title="Name 2"class="required" name="tb1" /><br />
    <!--<input type="button" name="" value="Test" onclick="Verify();"/>
    --><div id="Warning" >Please Complete</div>
    </form>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    ismailc (01-18-2010)

  4. #3
    Join Date
    Dec 2007
    Posts
    88
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thank You - I'm working on it

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
  •