CODEWITHSUNDEEP
javascript
Norman
Norman

Reputation: 6365

Adding form verification in this case

I've got 3 groups of radio buttons and 1 set of check boxes. How do i check if a radio button is selected in each group of radio buttons and at least one check box is selected? And if not, maybe pop an alert window. So thats : one radio button needs to be selected from all three groups and one check box (all four are mandatory). I've had no luck with this. Thanks

<html> 
<head> 
<script type="text/javascript"> 
function DisplayFormValues() 
{ 
var str = ''; 
var elem = document.getElementById('frmMain').elements; 


for(var i = 0; i < elem.length; i++) 
{
if(elem[i].checked)
{
str += elem[i].value+"<br>";
}
} 

document.getElementById('lblValues').innerHTML = str; 
document.frmMain.reset();
} 

</script> 
</head> 
<body> 

<form id="frmMain" name="frmMain"> 
Set 1
<INPUT TYPE="radio" NAME="r1" value="r1a">
<INPUT TYPE="radio" NAME="r1" value="r1b">
<INPUT TYPE="radio" NAME="r1" value="r1c">
<br>
Set 2
<INPUT TYPE="radio" NAME="r2" value="r2a">
<INPUT TYPE="radio" NAME="r2" value="r2b">
<INPUT TYPE="radio" NAME="r2" value="r2c">
<br>
Set 3
<INPUT TYPE="radio" NAME="r3" value="r3a">
<INPUT TYPE="radio" NAME="r3" value="r3b">
<INPUT TYPE="radio" NAME="r3" value="r3c">
<br>
Check 1
<INPUT TYPE="checkbox" NAME="c1" value="c1a">
<INPUT TYPE="checkbox" NAME="c1" value="c1b">
<INPUT TYPE="checkbox" NAME="c1" value="c1c">

<input type="button" value="Test" onclick="DisplayFormValues();" /> 
</form> 
<hr /> 
<div id="lblValues"></div> 

</body> 
</html>

Upvotes: 0

Views: 127

Answers (3)

user180100
user180100

Reputation:

Here's a modified version of your function:

function DisplayFormValues() { 
    var str = ''; 
    var elem = document.getElementById('frmMain').elements; 
    var groups = { 'r1': 0, 'r2': 0, 'r3':0, 'c1': 0 };

    for (var i = 0; i < elem.length; i++){
        if (elem[i].checked) {
            var n = elem[i].name;
            groups[n] += 1
            str += elem[i].value + "<br>";
        }
    } 

    document.getElementById('lblValues').innerHTML = groups['r1'] + "/" + 
        groups['r2'] + "/" + groups['r3'] + "/" + groups['c1']; 
    document.frmMain.reset();
}

In this function we count how many elements are checked (obviously one for radio button in the same group but you understand the principle and this is flexible) and groups[XXX] is the count (with XXX being the group name). You can adjust to your needs and add the alert as requested.

Upvotes: 1

Sam Dufel
Sam Dufel

Reputation: 17598

var radioCount = 0;
var checkBoxCount = 0;
var currentElement;

for (var i = 0; i < elem.length; ++i) {
  currentElement = elem[i];

  if (!currentElement.checked)
    continue;
  if (currentElement.type == "checkbox")
    ++checkBoxCount;
  else if (currentElement.type == "radio")
    ++radioCount;
}

if (radioCount < 3)
  //fail

if (checkBoxCount < 1)
  //fail

Upvotes: 0

Amir Raminfar
Amir Raminfar

Reputation: 34149

You can do this in javascript by writing a lot of code or I strongly recommend using jquery validation plugin. Look at this example: http://jquery.bassistance.de/validate/demo/radio-checkbox-select-demo.html

You can do something like:

<input type="radio" validate="required:true" name="family" value="s" id="family_single" class="error">

Which will require at least one option being selected.

Also, its best to have inline feedback when something is not valid. Having alerts can be really annoying.

Upvotes: 0

Related Questions