Javascript Radiobutton Group Validation

StackOverflow https://stackoverflow.com/questions/4977084

Question

I would like your help to develop a javascript function to validate if one of the following radiobutton group (IDType) is selected and which value is checked and view error message in (ValidationError) division in case no radio button selected ??

<td>
<div>
<span>
<input type="radio" name="IDType" id="IDType" value="IDtype1"/>
ID Type 1
<input type="radio" name="IDType" id="IDType" value="IDtype2"/>
ID Type 2
</span>
<div id="ValidationError" name="ValidationError">
&nbsp;
</div>
</div>
</td>

Thanks for your help.....

Was it helpful?

Solution

First of all, as said my collegues, you cannot have the same id ("IDType") for both your radio buttons.

Here is a solution with javascript only, without any jquery.

<html>
<head>
<script type="text/javascript">
function Validate() {
    var radios = document.getElementsByName('IDType')

    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
        alert("Selected Value = " + radios[i].value);
        return true; // checked
    }
    };

    // not checked, show error
    document.getElementById('ValidationError').innerHTML = 'Error!!!';
    return false;
}
</script>
</head>
<body>
<form>
<div>
<span>
<input type="radio" name="IDType" value="IDtype1"/>
ID Type 1
<input type="radio" name="IDType" value="IDtype2"/>
ID Type 2
</span>
<div id="ValidationError" name="ValidationError">
</div>
</div>
<input type="submit" value="Submit" onclick="return Validate();" />
</form>
</body>
</html>

OTHER TIPS

function validateRadioButtons(){ 
    var radio = $('input:radio[name="IDType"]:checked');
    if(radio.length == 0)//no buttons selected
       {
           $('ValidationError').text("you haven't selected any buttons!");
           return;
       }
    $('ValidationError').text(radio.val()+' is selected');
}

ps: in order for this to work, you should consider using unique id's for dom elements. you cannot have the same id ("IDType") for both your radio buttons.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top