Client Validation (JavaScript) for CustomValidator Control

16 Dec 2005 3:42 PM

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_CheckBoxListDaily_0"
type="checkbox"
name="ctl00$ContentPlaceHolderMain$Daily1$CheckBoxListDaily$0" /><label
for="ctl00_ContentPlaceHolderMain_Daily1_CheckBoxListDaily_0">Sun</label>),
how can you reference the correct controls by ID/Name?

Is there a better way of doing this?

Thanks!

16 Dec 2005 4:05 PM

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

Show quote

"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_CheckBoxListDaily_0"
> type="checkbox"
> name="ctl00$ContentPlaceHolderMain$Daily1$CheckBoxListDaily$0" /><label
> for="ctl00_ContentPlaceHolderMain_Daily1_CheckBoxListDaily_0">Sun</label>),
> how can you reference the correct controls by ID/Name?
>
> Is there a better way of doing this?
>
> Thanks!
>
>
>