Client Validation (JavaScript) for CustomValidator Control

[avp]

Hi,
We have an ASP.NET 2.0 (C#) application that has a web form with a
CheckBoxList control and a CustomValidator control. The CustomValidator
control is used to validate that at least one checkbox is checked in the
CheckBoxList control.

Everything works fine for the server-side validation. However, we're having
difficulties with writing a JavaScript function to perform the same
validation on the client-side.

Here's what we got:

<script type="text/javascript">
function validateChecked(oSrc, args)
{
args.IsValid = false;

var formToValidate = document.forms['aspnetForm'];

if (!formToValidate)
{
formToValidate = document.aspnetForm;
}

var controlIndex;
var numberOfControls = formToValidate.length;
var element;

for (controlIndex = 0; controlIndex < numberOfControls;
controlIndex++)
{
element = formToValidate[controlIndex];

if (element.type == "checkbox")
{
if (element.checked == true)
{
args.IsValid = true;
}
}
}
}
</script>

With this code, everything seems to work fine. The problem is that we have
other checkboxes on the form that are not part of the CheckBoxList control,
and this JavaScript code cannot distinguish between the checkboxes in the
CheckBoxList control that we want to validate and the other checkboxes that
we don't want to validate.

Does anyone know how to write this JavaScript code to validate that at least
one checkbox in our CheckBoxList control is checked, while ignoring any
other checkboxes on the web form?

Since ASP.NET assigns some funky IDs/Names when the CheckBoxList is rendered
(e.g.,
<input id="ctl00_ContentPlaceHolderMain_Daily1_CheckBoxLi stDaily_0"
type="checkbox"
name="ctl00$ContentPlaceHolderMain$Daily1$CheckBox ListDaily$0" /><label
for="ctl00_ContentPlaceHolderMain_Daily1_CheckBoxL istDaily_0">Sun</label>),
how can you reference the correct controls by ID/Name?

Is there a better way of doing this?

Thanks!

[Phillip Williams]

A CheckBoxList server control renders an HTML Table on the browser. If you
give an ID to that CheckBoxList, e.g.
<asp:CheckBoxList ID="chkList1" Runat=server >
<asp:ListItem Value="item1">Item 1</asp:ListItem>
<asp:ListItem Value="item2">Item 2</asp:ListItem>
</asp:CheckBoxList>

Then in Javascript you can access its checkboxes only by a script like this:

var chkList1= document.getElementById ("chkList1");
var arrayOfCheckBoxes= chkList1.getElementsByTagName("input");
for(var i=0;i<arrayOfCheckBoxes.length;i++)
//do as you wish with each arrayOfCheckBoxes[i] element
alert(arrayOfCheckBoxes[i].id); //would echo the control's ID

As for you second question on how to retrieve individual checkboxes by ID
(considering the lengthy ID syntax formulated by ASP.NET) I usually write a
Javascript function such as this:
function findControl(ControlName)
{ var ret=null;
var aControls = document.getElementsByTagName("input");
if (aControls)
{ for (var i=0; i< aControls.length ; i++)
{
if (aControls[i].id.lastIndexOf(ControlName) == aControls[i].id.length -
ControlName.length &&
aControls[i].id.length != ControlName.length &&
aControls[i].id.lastIndexOf(ControlName) > 0 )
{
ret =aControls[i];
break;
}
}
}
return ret;
}

--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"avp" wrote:

Hi,
We have an ASP.NET 2.0 (C#) application that has a web form with a
CheckBoxList control and a CustomValidator control. The CustomValidator
control is used to validate that at least one checkbox is checked in the
CheckBoxList control.

Everything works fine for the server-side validation. However, we're having
difficulties with writing a JavaScript function to perform the same
validation on the client-side.

Here's what we got:

<script type="text/javascript">
function validateChecked(oSrc, args)
{
args.IsValid = false;

var formToValidate = document.forms['aspnetForm'];

if (!formToValidate)
{
formToValidate = document.aspnetForm;
}

var controlIndex;
var numberOfControls = formToValidate.length;
var element;

for (controlIndex = 0; controlIndex < numberOfControls;
controlIndex++)
{
element = formToValidate[controlIndex];

if (element.type == "checkbox")
{
if (element.checked == true)
{
args.IsValid = true;
}
}
}
}
</script>

With this code, everything seems to work fine. The problem is that we have
other checkboxes on the form that are not part of the CheckBoxList control,
and this JavaScript code cannot distinguish between the checkboxes in the
CheckBoxList control that we want to validate and the other checkboxes that
we don't want to validate.

Does anyone know how to write this JavaScript code to validate that at least
one checkbox in our CheckBoxList control is checked, while ignoring any
other checkboxes on the web form?

Since ASP.NET assigns some funky IDs/Names when the CheckBoxList is rendered
(e.g.,
<input id="ctl00_ContentPlaceHolderMain_Daily1_CheckBoxLi stDaily_0"
type="checkbox"
name="ctl00$ContentPlaceHolderMain$Daily1$CheckBox ListDaily$0" /><label
for="ctl00_ContentPlaceHolderMain_Daily1_CheckBoxL istDaily_0">Sun</label>),
how can you reference the correct controls by ID/Name?

Is there a better way of doing this?

Thanks!