Javascript to check req fields on button click

**ismailc** · 01-18-2010, 06:54 AM

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

**vwphillips** · 01-18-2010, 01:09 PM

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>

**ismailc** · 01-18-2010, 01:24 PM

Thank You - I'm working on it

Thread: Javascript to check req fields on button click

Thread Tools

Search Thread

Javascript to check req fields on button click

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

Bookmarks

Bookmarks

Posting Permissions