Checkboxlist - validation - client side javascript

Discussion in 'ASP .Net' started by Guest, May 27, 2005.

  1. Guest

    Guest Guest

    Hello!

    I need client side script to verify that at least one checkbox is checked in
    a checkboxlist. Any suggestions?
     
    Guest, May 27, 2005
    #1
    1. Advertisements

  2. Guest

    prasad

    Joined:
    Nov 13, 2006
    Messages:
    1
    Likes Received:
    0
    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. Advertisements

  3. Guest

    ankur.d.1987

    Joined:
    Oct 28, 2011
    Messages:
    1
    Likes Received:
    0
    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. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.