CheckBoxList validation

Chakravarthy — Thu, 21 May 2009 05:04:00 GMT

Within our current project, we faced a requirement such that there are multiple checkboxes and the user is required to select any one of them (at least one of them). So as there are multiple checkboxes, decided to go with CheckBoxList control. Now the problem is that, we need to show a error message if the user is not selected any one of them. The problem also extends not just there, but the display text should be culture specific.

So the story started long after I've written this post. But editing this entire post due to a simple non supportive feature by IE. I’ll come to that point later in this post, let me first detail the requirement and solution. There is one more solution for this unsupported error. Please read thru the post.

For all the client side validations, it is widely known that validation controls supported by ASP.NET framework are popularly used. But these controls can’t handle the CheckBoxList. Hence the following solution.

Step 1: Place your CheckBoxList control in a separate div as shown below. Observe that the text for these controls are populated from database depending upon the user culture

<div id="cblItems1">
    <asp:CheckBoxList ID="cblOptions" runat="server">
        <asp:ListItem Text="<%$Resources:CommonFormFields, Repair%>"></asp:ListItem>
        <asp:ListItem Text="<%$Resources:CommonFormFields, Calibration%>"></asp:ListItem>
        <asp:ListItem Text="<%$Resources:CommonFormFields, RepairCalibration%>"></asp:ListItem>
        <asp:ListItem Text="<%$Resources:CommonFormFields, OnlineService%>"></asp:ListItem>
    </asp:CheckBoxList>
</div>

Step 2: Use ASP:Lable and get the error message while loading and place in a separate div and hide this div by default as mentioned below. Please note the div ID as cblError1 and the style is set to hidden by default

<div id="cblError1" style="visibility: hidden">
    <asp:Label ID="lblReq1" runat="server" Text="<%$Resources:CommonFormFields, SelectAny%>"></asp:Label>
    </div>

Step 3: Write a JScript function that reads all the client side rendered elements as input objects and checks whether any of them are checked or not. Code explains more in detail

function CheckListValidation(cblItm, errDiv)
{
    var tDiv = document.getElementById(cblItm);
    var chkitems = tDiv.childNodes[1];
    var chkitm = chkitems.getElementsByTagName("input");
    for (var i = 0; i < chkitm.length; i++) 
    {
        if (chkitm.checked) 
        {                    
                return true;
        }
    }
    document.getElementById(errDiv).style.visibility = 'visible';
    return false;
}

Step 4: Now it is the turn of invoking this function from the button click. Every button is having a method called as “OnClientClick” along with Click. Invoke this function from that method as mentioned below

<asp:Button ID="btnAddMore" runat="server" Text="Add More" 
OnClientClick="return CheckListValidation('cbOptions','cblError1');"
    OnClick="btnAddMore_Click" />

Step 5: All setup and the code is running fine. But there is a problem with this code while running in IE. IE 6 and above doesn’t support the getElementsByTag

var vTe = document.getElementsByTagName(..);

There is a long story for this. Let me post one more post for the better mechanism of CheckBoxList Validation. Until then, what are your comments??

The importance of 'Return' keyword at JavaScript

Chakravarthy — Sat, 15 Sep 2007 12:26:53 GMT

Recently, while coding for a Text Field value padded with left zeros, realised the importance of the RETURN key word for the FUNCTION written in JavaScript. Before i mention the actual importance, let me describe you the situation.

Scenario: A Text box need to be padded with zeros and should have the length of 7 digits, even the data entered is less than 7.

Ex: When the key board input being 88, the text box should show 0000088. Note the ZEROs padded on left.

So, started with a JavaScript function as mentioned below

function PadZeros(x)
    {
        var v = x.value;
        while(v.length<7)
        {
            v = '0' + v;
        }
        var ss = document.getElementById(x.id);
        ss.value = v;
    }

After this, the text box is padding with ZEROs and the code is perfectly running. To allow this to code execute for any given text box, all you have to do is, add the ATTRIBUTE to that text box. And while adding keep one thing in mind that, we would be calling this function on BLUR, ie., LOST FOCUS of the text box. The code is as mentioned below.

            this.txtPCode.Attributes.Add("onblur", "PadZeros(this);");

Please note the 'this' keyword. The usage of 'this' keyword has many possibilities. Let me see that, one day will post where the 'this' keyword is used and their context. And also note that, neither the function is returning any value nor the text box is added with the code that handles the output of the function. Will come to that in short.

Every thing is working perfectly well and going on smooth. But suddenly, i realised that the text box is just padding ZEROs when there is no Input. I see all ZEROs in the text box as 0000000. Then came the real trick to the function.

function PadZeros(x)
    {
        var v = x.value;
        if(v.length == 0)
        {
            var vTe = document.getElementById(x.id);
            vTe.focus();
            alert('Please enter Provider Code .. ');
        }
        while(v.length<7)
        {
            v = '0' + v;
        }
        var ss = document.getElementById(x.id);
        ss.value = v;
    }

What do you see here is the mechanism to set the focus back to the text box. Great... but that even is not solving my purpose of leaving the text box blank when there is no input. This function is still adding ZEROs to no input and showing all ZEROs. Then came the purpose of the 'return' keyword. The entire requirement is simply solved by this keyword. All i've done is.. changed the code as mentioned below.

function PadZeros(x)
    {
        var v = x.value;
        if(v.length == 0)
        {
            var vTe = document.getElementById(x.id);
            vTe.focus();
            alert('Please enter Provider Code .. ');
            return false;
        }
        while(v.length<7)
        {
            v = '0' + v;
        }
        var ss = document.getElementById(x.id);
        ss.value = v;
        return true;
    }

At the code behind added 'return' as shown here

            this.txtPCode.Attributes.Add("onblur", "return PadZeros(this);");

That's all.. hoollaa... What do you say ?

Technorati Tags: JavaScript, PadZeros, return

Chakravarthy's Space : JavaScript

CheckBoxList validation

The importance of 'Return' keyword at JavaScript