get all selected values from ListBox (client side)

Question

I'm trying to implement a custom validator in JavaScript for my vb.net page. This validator should check if in a multichoice listbox there aren't any selected values, showing an error pop up if so.

The thing is, I want to do it client side, but in my 'validateFunction' function I only get the last selected (or unselected, if it was selected already) item. I know how to do it in code-behind code, but I want to do it client-side.

aspx code:

 <asp:ListBox ID="lbEdit" runat="server" SelectionMode="Multiple">
 </asp:ListBox>
 <asp:CustomValidator id="cvEdit" runat="server" Display="None" ControlToValidate="lbEdit" ClientValidationFunction="validateFunction"/>
 <ajax:ValidatorCalloutExtender runat="server" ID="vceEdit" TargetControlID="cvEdit" />

JavaScript code:

 function validateFunction(source, arguments) {
        var options = document.getElementById(source.controltovalidate).options;
            for (var i = 0; i < options.length; i++) {
                if (options[i].selected == true) {
                    args.IsValid = true;
                    return;
                }
            }
            args.IsValid = false;
 }

As I said, since last (un)selected item will be the only one selected in the 'options' array, the validating function will always return true...

I thought of populating another array in another javascript function as the 'true selected array' and compare its values with the selected option each time the function fires.. but I think there should be a better way.

So... Is there a straight forward way to get ALL the selected items from a multichoice listbox in javascript?

Answer 1

Your question is a bit unclear, and your function seems working, but what I will answer here is the last part of your question So... Is there a straight forward way to get ALL the selected items from a multichoice listbox in javascript?

Try this js function

<script type="text/javascript">
        function validateFunction() {
            var options = document.getElementById('<% = this.lbEdit.ClientID %>').options;
            var selectedItems;
            for (var i = 0; i < options.length; i++) {
                if (options[i].selected == true) {
                    if (selectedItems) {
                        selectedItems = selectedItems + ";" + options[i].value;
                    }
                    else {
                        selectedItems = options[i].value;
                    }
                }
            }
            if (selectedItems) {
                alert(selectedItems);
                return true;
            }
            else {
                alert("No item was selected");
                return false;
            }
        }
    </script>

And this is the aspx code, I removed the validator

 <asp:ListBox ID="lbEdit" runat="server" SelectionMode="Multiple" >
 </asp:ListBox>
    <asp:Button ID="test" runat="server" Text="send"  OnClientClick="return validateFunction();"/>

In the developer tools of your browser you can see a detailed information about all the properties of your object

Answer 2

let a1 = [
{
    Selected:false,
},
{
    Selected:false
},
{
    Selected:false
}];

if (a1.some(i => i.Selected)) console.log(true); else console.log(false);

Maybe what you want