PDA

View Full Version : 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
<!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


<!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 :)