Validating server-side RadioButtonList in javascript

[raygberg]

Hello:

I am trying to validate an ASP.NET radiobuttonlist using client-side javascript in a "Custom Validator" control.

Here is my javascript validator:

function ValidatePrem(source, args) {
               var Array1 = document.getElementsByName('<%= rblPremModes.ClientID %>')
               var i;
               for (i = 0; i < 4; i++) {
                 if (Array1[i].checked) {
                       if (Array1[i].value == document.getElementById('CurrPremMode').value) {
                           args.IsValid = false;
                       }
                   }
               }
           }

Here is the RadiobuttonList that I am trying to validate, as rendered after compilation in HTML:

<table id="ctl00_ContentPlaceHolder1_rblPremModes" border="0">
				<tr>
					<td><input id="ctl00_ContentPlaceHolder1_rblPremModes_0" type="radio" name="ctl00$ContentPlaceHolder1$rblPremModes" value="Monthly" /><label for="ctl00_ContentPlaceHolder1_rblPremModes_0">Monthly</label></td>
				</tr><tr>
					<td><input id="ctl00_ContentPlaceHolder1_rblPremModes_1" type="radio" name="ctl00$ContentPlaceHolder1$rblPremModes" value="Quarterly" /><label for="ctl00_ContentPlaceHolder1_rblPremModes_1">Quarterly</label></td>
				</tr><tr>
					<td><input id="ctl00_ContentPlaceHolder1_rblPremModes_2" type="radio" name="ctl00$ContentPlaceHolder1$rblPremModes" value="Semi-Annually" /><label for="ctl00_ContentPlaceHolder1_rblPremModes_2">Semi-Annually</label></td>
				</tr><tr>
					<td><input id="ctl00_ContentPlaceHolder1_rblPremModes_3" type="radio" name="ctl00$ContentPlaceHolder1$rblPremModes" value="Annually" /><label for="ctl00_ContentPlaceHolder1_rblPremModes_3">Annually</label></td>
				</tr>
			</table>

When I try to do the "GetElementsByName('<%= rblPremModes.ClientID %>')", the ClientID returns a name that is different from the name listed in the compiled radiobuttonlist control:
radiobuttonlistcontrol = "ctl00$ContentPlaceHolder1$rblPremModes"
rblPremModes.ClientID = "ctl00_ContentPlaceHolder1_rblPremModes"

As you can see, one name contains underlines, the other contains $ signs.

How can I make the rblPremModes.ClientID return the same name as the "Name" attribute of the compiled radiobuttonlist control?

[raygberg]

To clarify the last post: The javascript validator is tied to a CustomValidator control that is validating the radiobuttonlist.

function ValidatePrem(source, args) {
               var Array1 = document.getElementsByName('<%= rblPremModes.ClientID %>')
               var i;
               for (i = 0; i < 4; i++) {
                 if (Array1[i].checked) {
                       if (Array1[i].value == document.getElementById('CurrPremMode').value) {
                           args.IsValid = false;
                       }
                   }
               }
           }

When I try to execute "ValidatePrem", it says that "Array1.checked" is not an object. I'm thinking that it's due to the difference in names between the one returned by "rblPremModes.ClientID", which contains underlines, and the compiled name of the rblPremModes radiobutton list, which contains $ signs.

[kvprajapati]

Do not use ClientID with document.getElementsByName() method.

function ValidatePrem(source, args) {
  var Array1 = document.getElementsByName("rblPremModes");
  ...  
}