Checkboxlist - validation - client side javascript

Discussion in 'ASP .Net' started by =?Utf-8?B?U2FuZHk=?=, May 27, 2005.

  1. Hello!

    I need client side script to verify that at least one checkbox is checked in
    a checkboxlist. Any suggestions?

    --
    Sandy
     
    =?Utf-8?B?U2FuZHk=?=, May 27, 2005
    #1
    1. Advertising

  2. =?Utf-8?B?U2FuZHk=?=

    prasad

    Joined:
    Nov 13, 2006
    Messages:
    1
    hello

    I need client side script to verify that at least one checkbox is checked in
    a checkboxlist. Any suggestions?

    --
    ------------------------------------------------------------------------------------------------------------------------------------------------------
     
    prasad, Nov 13, 2006
    #2
    1. Advertising

  3. =?Utf-8?B?U2FuZHk=?=

    ankur.d.1987

    Joined:
    Oct 28, 2011
    Messages:
    1
    Validate Checkbox List using client side java-script

    Hi

    You can use simple javascript to validate a check box list follows:

    I have written two javascript functions for this:-

    1) ValidateEducations() : This function finds the checkboxlist control in the client side and iterates through all the listitems of the checkboxlist. It takes up every listitem (which is actually a checkbox) one by one and finds whether it is checked or not. The moment it finds a checked checkbox it returns true indicating that the checkboxlist is validated. If none of the listitems(child checkboxes) are found checked and the for loop (enumerating through the listitems) ends, it returns false indicates that checkboxlist validation failed.

    2) ShowHidevalidationError(): This function just does the job of showing/hiding validation error.

    /******************************/
    <script type="text/javascript" language="javascript">
    function ValidateEducations() {
    var chkEducations = document.getElementById('<%= chkEducations.ClientID %>');
    if(chkEducations) {
    var chkEducationsItemList = chkEducations.getElementsByTagName('input');
    if(chkEducationsItemList) {
    if(chkEducationsItemList.length > 0) {
    for(var i = 0 ; i < chkEducationsItemList.length; i++) {
    var chkEducationsItem = chkEducationsItemList;
    if(chkEducationsItem) {
    if(chkEducationsItem.type == 'checkbox') {
    if(chkEducationsItem.checked) {
    return ShowHideValidationError(false);
    }
    }
    }
    }
    }
    }
    }
    return ShowHideValidationError(true);
    }

    function ShowHideValidationError(show) {
    var lblEducationsValidationError = document.getElementById('<%= lblEducationsValidationError.ClientID %>');
    if(lblEducationsValidationError) {
    if(show) {
    lblEducationsValidationError.style.display = 'block';
    return false;
    } else {
    lblEducationsValidationError.style.display = 'none';
    return true;
    }
    }
    }
    </script>
    /******************************/



    And here goes the related HTML markup:
    /**********************************************************/
    <table>
    <tr>
    <td>
    <div>
    <asp:Label ID="lblEducation" runat="server" Text="Education" />
    </div>
    <div>
    <asp:Label ID="lblHint" runat="server" Text="(Please select all qualificatins you have acquired)"
    Font-Size="8" ForeColor="GrayText" />
    </div>
    </td>
    <td>
    <asp:CheckBoxList ID="chkEducations" runat="server" RepeatDirection="Vertical" RepeatLayout="Flow"
    TextAlign="Right" onclick="ValidateEducations()">
    <asp:ListItem Text="Primary School" Value="1" />
    <asp:ListItem Text="High School" Value="2" />
    <asp:ListItem Text="Junior College" Value="3" />
    <asp:ListItem Text="Graduate" Value="4" />
    <asp:ListItem Text="Post Graduate" Value="5" />
    <asp:ListItem Text="Phd" Value="6" />
    </asp:CheckBoxList>
    </td>
    </tr>
    <tr>
    <td colspan="2">
    <asp:Label ID="lblEducationsValidationError" runat="server" Font-Bold="true" ForeColor="Red"
    Text="Please select at least one educational qualification." Style="display:none" />
    </td>
    </tr>
    <tr>
    <td colspan="2">
    <asp:Button ID="btnSubmitForm" runat="server" Text="Submit" OnClientClick="return ValidateEducations()"
    OnClick="btnSubmitForm_Clicked" />
    </td>
    </tr>
    </table>
    /**********************************************************/



    Description:
    The checkbox list control renders as an HTML table if the RepeatLayout property is set as "table" and renders as HTML <span> if the RepeatLayout property is set as ""Flow".
    In both he cases the client side javascript event onclick works. Hence the moment you check/uncheck a checkbox the validation functions will be called and the checkboxlist will be validated on the client side itself.

    How do we validate?

    Whether the checkboxlist renders into <span> or <table> it is definitely going to contain a collection of child HTML elements i.e. <input> tags with their type set to "checkbox" each.

    This collection is retrieved by calling the method getElementsByTagName('input') on the instance of the checkboxlist control.

    We then iterate through all the elements in this collection and for each element (checkbox) we assess the checked status. If checkbox is checked we return immediately because validation has succeeded. If we are, however, done iterating through all the elements (checkboxes) and still found none as checked then we display the validation failed message.


    Thank you
    Ankur
     

    Attached Files:

    ankur.d.1987, Oct 28, 2011
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Libs
    Replies:
    0
    Views:
    1,523
  2. Matt
    Replies:
    14
    Views:
    4,141
    Chad Z. Hower aka Kudzu
    Jan 30, 2004
  3. =?Utf-8?B?dmlkeWE=?=
    Replies:
    1
    Views:
    763
    Kevin Spencer
    Jun 2, 2005
  4. Boss302
    Replies:
    0
    Views:
    1,070
    Boss302
    Nov 21, 2006
  5. Bogdan
    Replies:
    2
    Views:
    668
    Bogdan
    Jun 9, 2008
Loading...

Share This Page