...

View Full Version : Radio Button validation



charon
12-04-2006, 07:44 AM
Hi,

I have been spending about 2 days to test my radio button validation, still coudn't get what I want. Well, what I'm trying to achieve is :

I have 5 groups of radio buttons as below:

<input type="radio" name="group1" value="Y" />
<input type="radio" name="group1" value="N" />


<input type="radio" name="group2" value="Y" />
<input type="radio" name="group2" value="N" />


<input type="radio" name="group3" value="Y" />
<input type="radio" name="group3" value="N" />



<input type="radio" name="group4" value="Y" />
<input type="radio" name="group4" value="N" />



<input type="radio" name="group5" value="Y" />
<input type="radio" name="group5" value="N" />

What I'm trying to do is validate each group of radio button must at least be selected as I don't want to put the default checked. I use the for loop base on the form elements length as below:

len = frm.elements.length
for (i=0;i<len ;i++ ){
if (frm.elements[i].type=="radio" && frm.elements[i].checked) {
alert("you choose " + frm.elements[i].value);
radio_choice = true;
break;
}
if (!radio_choice){

alert("Please select an option.")
frm.elements[i].focus();
return false

}

But it failed to achieve what I want, kindly advise......

brandonH
12-04-2006, 07:52 AM
well, if you have 5 groups of radio buttons, then in the end you wnat 5 buttons checked, right?


so in you loop have it do as so:




var len = document.frm.elements.length
var checksvalid='0';
for (i=0;i<len ;i++ ){
if (frm.elements[i].type=="radio" && frm.elements[i].checked) {
alert("you choose " + frm.elements[i].value);
checksvalid++;

}
if (checksvalid!='5'){
alert("You only selected "+checksvalid+" option(s), please select an option from all categories.");
document.frm.elements[i].focus();
return false;
}else{return true;}

charon
12-04-2006, 08:56 AM
Hi,
No, it can't solve my problem as what I want is validate the radio button in sequences, if group1 didn't "checked" and proceed to group2, then it will prompt the alert message.

The sample code that you provide actually it same as mine whereby what it does is it will check every single elements of the radio button and prompt the alert message whenever there has no checked. For example:if none of the radio button group is checked, then it will prompt me 10 times instead of 5 times. So, the document.frm.elements[i].focus() will also incorrect.

Kindly advise......

Kor
12-04-2006, 09:46 AM
Try this. It should do the trick:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
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;
}
if(q){alert('Please select an option in each group');return false}
}
}
}
</script>
</head>
<body>
<form action="" onsubmit="return valid(this.elements)">
<input type="radio" name="group1" value="Y" />
<input type="radio" name="group1" value="N" />
<br>
<input type="radio" name="group2" value="Y" />
<input type="radio" name="group2" value="N" />
<br>
<input type="radio" name="group3" value="Y" />
<input type="radio" name="group3" value="N" />
<br>
<input type="radio" name="group4" value="Y" />
<input type="radio" name="group4" value="N" />
<br>
<input type="radio" name="group5" value="Y" />
<input type="radio" name="group5" value="N" />
<br>
<br>
<input type="submit" name="subm" value="Submit">
</form>
</body>
</html>

brandonH
12-04-2006, 09:56 AM
sorry about that. wow, my brain took a major leap off a cliff there. lol
even though kor's solution is shorter and allows for further additions of more radio buttons :thumbsup:
here is what i think you wanted.


<html>
<head>

<script type=text/javascript>
function checkit(){
var totalpairs='5';
var notvalid='0';
var spans=document.getElementById('frm').getElementsByTagName('span');
var j='0';
while(j<spans.length){spans[j].style.backgroundColor='';j++;}

for (i=1;i<=totalpairs ;i++ ){
var name='group'+i;
var radiogroup=document.getElementsByName(name);
if(!(radiogroup[0].checked || radiogroup[1].checked)){
notvalid++;
radiogroup[0].parentNode.style.backgroundColor='orange';
break;
}
}
if(notvalid!='0'){alert('Please make a selection in the highlighted group(s)'); return false;}
else{return true;}
}
</script>
</head>

<body>
<form name=frm id=frm onsubmit="return checkit();">
<span>
<input type="radio" name="group1" value="Y" />
<input type="radio" name="group1" value="N" />
</span>
<br>
<span>
<input type="radio" name="group2" value="Y" />
<input type="radio" name="group2" value="N" />
</span>
<br>
<span>
<input type="radio" name="group3" value="Y" />
<input type="radio" name="group3" value="N" />
</span>
<br>
<span>
<input type="radio" name="group4" value="Y" />
<input type="radio" name="group4" value="N" />
</span>
<Br>
<span>
<input type="radio" name="group5" value="Y" />
<input type="radio" name="group5" value="N" />
</span>
<br>
<input type=button onclick=checkit()>
</form>
</body>
</html>

charon
12-05-2006, 09:36 AM
Thanks so much for all the reply. All the solutions are workable.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum