Validating a listbox using javascript

[laks2886]

can anybody tell me how do u validate a listbox to select atleast one item from it. I have a listbox within the template field of a grid view. and these listboxes can vary from 1 to 4. how can i know how many listboxes are present so that i can loop in javascript.

[acoder]

Welcome to Bytes!

I assume you mean a multiple select. You can validate it by looping over the options (see example) and checking how many are selected (check the selected property).

To get all the list boxes in a page, use document.getElementsByTagName("select") and loop over the resulting array.

[laks2886]

thanks for the reply.. i have drop down and lsit boxes in my page.. these listboxes are dynamic and can vary from 1 to 4.

as u said i have used document.getElementsByTagName("select") to get all the references.. this is working fine for the dropdown, when it comes to list box ... instead of selecting the labeldesc of the lisbox it takes the values of the list box.

[acoder]

Can you show the code for the list box. How does it differ from a drop-down?

[laks2886]

This is the Java script functin for validating the drop down.. listbox n text box...

function ValidateSave()
{
    var lblSelectClient                 = document.getElementById('<%=ddlSelectClient.ClientID%>');
    if(lblSelectClient.selectedIndex==0)
    {
        alert('Please select a client');
        return false;
    }
 
    var ddlSelectHierarchy             = document.getElementById('<%=ddlSelectHierarchy.ClientID%>');
    if(ddlSelectHierarchy.selectedIndex==0)
    {
        alert('Please select a hierarchy');
        return false;
    }    
 
    var hdMode                          = document.getElementById('<%=hdMode.ClientID%>');
    var isSelected                      = false;
    var hasList                         = false;
    var strLevel="";
    //if(hdMode.value="HierEdit")
    {
        var dropdownReferences = document.getElementsByTagName("select");
 
        if(dropdownReferences !=null)
        {
            if(dropdownReferences.length != null)
            {
                for (i = 0; i <dropdownReferences.length-1; i++)
                {
                    if(dropdownReferences[i].id.search("LstHierA")==-1)
                    {
                        if(dropdownReferences[i].selectedIndex==0)
                        {
                                 var level = document.getElementById(replace(dropdownReferences[i].name.replace("ddlLevel","lblLevelDesc"),"$","_")).innerText;
                                if(level.search("Select")!=-1)
                                {
                                    level=level.replace("Select ","");
                                }
 
                                alert('Please select a value for '+level);
                                return false;                     
                        }
                    }
                    else
                    {
                        hasList = true;
                        strLevel = document.getElementById(replace(dropdownReferences[i].name.replace("lstHierA","lblLevelDesc"),"$","_")).innerText;
                        if(strLevel!="")
                        {
                            strLevel=strLevel.replace("Select ","");
                        }
                        for(j=0;j<dropdownReferences[i].length;j++)
                        {
                            if(dropdownReferences[i].options[j].selected) 
                            {
 
                                isSelected=true;
                                break;
                            }
                        }
                    }
                }
            }
        }
 
        var inputReferences= document.getElementsByTagName("input");
 
           if (inputReferences != null)
        {
            if (inputReferences.length != null)
            {
                for (i = 0; i <= inputReferences.length-1; i++)
                {
                    if (inputReferences[i].type == 'text')
                    {
                        if (inputReferences[i].value == null || inputReferences[i].value == "")
                        {
 
                             var level = document.getElementById(replace(inputReferences[i].name.replace("txtEnterNewLevel","lblLevelDesc"),"$","_")).innerText;
                            if(level.search("Select")!=-1)
                            {
                                level=level.replace("Select ","");
                            }
                            else
                            {
                                level = document.getElementById(replace(inputReferences[i].name.replace("txtLeafNode","lblLevelDesc"),"$","_")).innerText;
                                if(level.search("Enter")!=-1)
                                {
                                    level=level.replace("Enter ","");
                                }
                            }
 
                            alert('Please enter a value for '+level);
                            inputReferences[i].focus();
                            return false;
 
                        }
                        var Ok;
                        OK=CheckLength(inputReferences[i]);
                        if(!OK)
                        {
                            return false;
                        }
                    }
                }            
            }             
        }
    }
    if(hasList)
    {
        if(!isSelected)
        {
            if(strLevel!="")
            {
                alert('Please select a '+strLevel);
                return false;
            }
        }
    }
 
    return true;
}
 
 

lstHierA is the name of the listbox

[acoder]

OK, but what about the actual list box code (view source at the client to see how it's rendered in HTML).

[laks2886]

<asp:GridView ID="grdLevels" runat="server" AutoGenerateColumns="False" Width="750px" OnRowDataBound="grdLevels_RowDataBound" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Horizontal" EnableViewState="true">
                <Columns>
                    <asp:TemplateField HeaderText="LevelDesc" ShowHeader="False">
                        <ItemTemplate>
                            <asp:Label ID="lblLevelDesc" Width="150px" runat="server" Text='<%# Bind("LevelDesc") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField ShowHeader="False" HeaderText="LevelControls">
                        <ItemTemplate>
                            <asp:DropDownList ID="ddlLevel" Width="200px" Enabled="false" OnSelectedIndexChanged="ddlLevel_SelectedIndexChanged" runat="server" AutoPostBack="true" AppendDataBoundItems="true">
                            <asp:ListItem Selected="True" Value="0">--Select--</asp:ListItem>
                            </asp:DropDownList>
                            <asp:TextBox ID="txtLeafNode" runat="server"></asp:TextBox>
 
 
 
                           <div id='divList1' runat="server"  style="Z-INDEX: 102;OVERFLOW:auto; WIDTH: 247px;height:90px" >
 
                            <asp:ListBox ID="LsthierA" SelectionMode="Multiple" Width="700px" runat="server" Rows="5" Height="10000">
                            </asp:ListBox>
 
                            </div>
 
 
                             <asp:ListBox ID="lstLevel" Width="200px" Visible="false" runat="server"></asp:ListBox>
                            <asp:HiddenField ID="hdlLevelKey" Value='<%#DataBinder.Eval(Container.DataItem,"LevelKey") %>' runat="server" />
                            <asp:HiddenField ID="hdIsLeafNode" Value='<%#DataBinder.Eval(Container.DataItem,"IsLeafNode") %>' runat="server" />
                            <asp:HiddenField ID="hdIsRoot" Value='<%#DataBinder.Eval(Container.DataItem,"IsRoot") %>' runat="server" />
                            <asp:HiddenField ID="hdDDLSelection" runat="server"/>
                            <asp:HiddenField ID="hdHierKey" runat="server"/>
 
                            <asp:TextBox ID="txtEnterNewLevel" Width="195px" Visible="false" runat="server" Enabled="false"></asp:TextBox>
                        </ItemTemplate>                      
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="NewLevelButton">
                        <ItemTemplate>
                            <asp:Button ID="btnNewLevel" OnClick="btnNewLevel_Click" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"LevelDesc") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="AttributeValueButton">
                    <ItemTemplate>
                        <asp:Button ID="btnAtVal" runat="server" Text="Add Attribute Value" OnClick="btnAtVal_Click" Width="118px" />
                    </ItemTemplate>
                    </asp:TemplateField>
 
                </Columns>
                <FooterStyle BackColor="#CCCC99" ForeColor="Black" />
                <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
                <HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
            </asp:GridView>

__________________________________________________ _ Is this wat u asked for??? In the function validatesave() .. am getting the references of the items with tag select. which includes dropdowns and listboxes which vary from (0-4). 1. i want to know how many listboxes are present?? wat's happening is .. whenever i select a item(eg., ABCD) from the listbox select item... it's giving an pop up alert saying.. Please select a value for ABCD. Actually validation should happen when am not selecting from the listbox and it should be like ' Please selec a value for Item'? Please let me know wat is wrong in function validate save?

[acoder]

@laks2886
Almost, but not quite. What you've posted is ASP.NET code, which is not much use for JavaScript. JavaScript runs on the client-side, so it sees the client-side generated code which you should post (load the page and view source in the browser).

PS. please remember to use [code] tags when posting code. Thanks!