...

View Full Version : Problem with Radio Button Validation



hey_suburbia
10-09-2008, 10:42 PM
The code works, but only to checks to see if the first radio button is checked in the group.

I know something like this works:


function valid(e){
for(var i=0;i<e.length;i++){
if(e[i].type=='radio'){
var r=e[e[i].name], q=true
for(var j=0;j<r.length;j++){
r[j].checked?q=false:null;
}

}
}
}


But I'm working with a different base code and I'm having a hard time getting it to work with the current code layout/structure.

Here is the specific chunk (the part I need to work is the "case 'radio':....":

// loop over required fields
for(var i=0;i<reqfields.length;i++)
{
// check if required field is there
var f=document.getElementById(reqfields[i]);
if(!f){continue;}
// test if the required field has an error,
// according to its type
switch(f.type.toLowerCase())
{
case 'text':
if(f.value=='' && f.id!='email'){cf_adderr(f)}
// email is a special field and needs checking
if(f.id=='email' && !cf_isEmailAddr(f.value)){cf_adderr(f)}
break;

case 'radio':
if(!f.checked){cf_adderr(f)}
break;

}
}
return !document.getElementById(errorID);



Here is the code in its entirety:


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Complex Form Example</title>
<style type="text/css">
#errormsg
{
border:2px solid #c00;
padding:5px;
width:20em;
}
.error
{
background:#fcc;
}
</style>
<script type="text/javascript">
function checkform(of)
{
// Test if DOM is available and there is an element called required
if(!document.getElementById || !document.createTextNode){return;}
if(!document.getElementById('required')){return;}

// Define error messages and split the required fields
var errorID='errormsg';
var errorClass='error'
/* changes for linked list */
var errorMsg='Please enter or change the following fields:';
/* end changes for linked list */
var errorImg='images/error.gif';
var errorAlt='Error';
var errorTitle='This field has an error!';
var reqfields=document.getElementById('required').value.split(',');

// Cleanup old mess
// if there is an old errormessage field, delete it
if(document.getElementById(errorID))
{
var em=document.getElementById(errorID);
em.parentNode.removeChild(em);
}
// remove old images and classes from the required fields
for(var i=0;i<reqfields.length;i++)
{
var f=document.getElementById(reqfields[i]);
if(!f){continue;}
if(f.previousSibling && /img/i.test(f.previousSibling.nodeName))
{
f.parentNode.removeChild(f.previousSibling);
}
f.className='';
}
// loop over required fields
for(var i=0;i<reqfields.length;i++)
{
// check if required field is there
var f=document.getElementById(reqfields[i]);
if(!f){continue;}
// test if the required field has an error,
// according to its type
switch(f.type.toLowerCase())
{
case 'text':
if(f.value=='' && f.id!='email'){cf_adderr(f)}
// email is a special field and needs checking
if(f.id=='email' && !cf_isEmailAddr(f.value)){cf_adderr(f)}
break;

case 'radio':
if(!f.checked){cf_adderr(f)}
break;

}
}
return !document.getElementById(errorID);

/* Tool methods */
function cf_adderr(o)
{
// create image, add to and colourise the error fields
var errorIndicator=document.createElement('img');
errorIndicator.alt=errorAlt;
errorIndicator.src=errorImg;
errorIndicator.title=errorTitle;
o.className=errorClass;
o.parentNode.insertBefore(errorIndicator,o);

// Check if there is no error message
if(!document.getElementById(errorID))
{
// create errormessage and insert before submit button
var em=document.createElement('div');
em.id=errorID;
var newp=document.createElement('p');
newp.appendChild(document.createTextNode(errorMsg))
em.appendChild(newp);
/* added for linked list */
var newul=document.createElement('ul');
em.appendChild(newul);
/* end added for linked list */
// find the submit button
for(var i=0;i<of.getElementsByTagName('input').length;i++)
{
if(/submit/i.test(of.getElementsByTagName('input')[i].type))
{
var sb=of.getElementsByTagName('input')[i];
break;
}
}
if(sb)
{
sb.parentNode.insertBefore(em,sb);
}
}
/* added for linked list */
var em=document.getElementById(errorID).getElementsByTagName('ul')[0];
var newli=document.createElement('li');
var newa=document.createElement('a');
for(var i=0;i<of.getElementsByTagName('label').length;i++)
{
if(of.getElementsByTagName('label')[i].htmlFor==o.id)
{
var txt=of.getElementsByTagName('label')[i].firstChild.nodeValue;
break;
}
}

newa.appendChild(document.createTextNode(txt));
newa.href='#'+f.id;
newa.onclick=function()
{
var loc=this.href.match(/#(\w.+)/)[1];
document.getElementById(loc).focus();
return false;
}
newli.appendChild(newa);
em.appendChild(newli);
/* end added for linked list */
}
function cf_isEmailAddr(str)
{
return str.match(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/);
}
}
</script>
</head>
<body>
<form action="formsend.php" method="post" onsubmit="return checkform(this);">
<p>
<input type="hidden" name="required" id="required" value="q1,q2,q3" />
<input type="radio" name="q1" id="q1" value="q1_0" />One
<input type="radio" name="q1" id="q1" value="q1_1" />Two
<input type="radio" name="q1" id="q1" value="q1_1" />Three
<input type="radio" name="q1" id="q1" value="q1_1" />Four
</p>

<p>
<input type="radio" name="q2" id="q2" value="q2_0" />One
<input type="radio" name="q2" id="q2" value="q2_1" />Two
</p>

<p>
<input type="radio" name="q3" id="q3" value="q3_0" />One
<input type="radio" name="q3" id="q3" value="q3_1" />Two
</p>


<p>
<input type="submit" value="Send" />
</p>
</form>
</body>
</html>

:confused:
I've tried a dozen methods and couldn't get it to work, I know it's a fairly easy fix, but I'm going cross eyed, any help is much appreciated, THANKS

Arty Effem
10-09-2008, 11:54 PM
The code works, but only to checks to see if the first radio button is checked in the group.
All ID attributes must be unique.

Basscyst
10-10-2008, 12:27 AM
Something like this maybe?



case 'radio':
var group=document.forms['yourformname'].elements[f.name];
var len=group.length;
var Flg=true;
for(var i=0;i<len;i++){
if(group[i].checked){
Flg=false;
}
}
if(Flg){
//none of the radio buttons for the group were checked
}
break;


Just give the first radio an id.

jmrker
10-10-2008, 12:58 AM
In your final code I'm having trouble seeing if the functions are complete or nested.
For example, in the following should there be a '}' after the 'return' statement?



return !document.getElementById(errorID);

/* Tool methods */
function cf_adderr(o)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum