CustomValidator 搭配 JavaScript 驗證 ListBox 是否有選項被選取

功能展示

使用 CustomValidator 配合客戶端 JavaScript，檢查 ListBox（多選模式）是否至少有一個項目被選取，未選取時阻止提交並顯示錯誤訊息。

資料實體與模擬資料（十天干）

public class HeavenlyStem
{
    public int ID { get; set; }
    public string Name { get; set; }
    public HeavenlyStem() { }
    public HeavenlyStem(int id, string name) { ID = id; Name = name; }
}

private List<HeavenlyStem> GetHeavenStem()
{
    return new List<HeavenlyStem> {
        new HeavenlyStem(1, "甲"), new HeavenlyStem(2, "乙"),
        new HeavenlyStem(3, "丙"), new HeavenlyStem(4, "丁"),
        new HeavenlyStem(5, "戊"), new HeavenlyStem(6, "己"),
        new HeavenlyStem(7, "庚"), new HeavenlyStem(8, "辛"),
        new HeavenlyStem(9, "壬"), new HeavenlyStem(10, "癸")
    };
}

前端頁面佈局

<asp:ListBox ID="ListBoxHeavenlyStem" runat="server" 
    Width="60" Height="160" SelectionMode="Multiple">
</asp:ListBox>

<asp:CustomValidator ID="CustomValidator1" runat="server" 
    Display="None" ErrorMessage="必須選擇至少一個選項" 
    ClientValidationFunction="ValidateListBox">
</asp:CustomValidator>

<asp:ValidationSummary ID="ValidationSummary1" runat="server" 
    EnableClientScript="true" ShowMessageBox="true" ShowSummary="false" />

<asp:Button ID="Button1" runat="server" Text="提交" />

後端資料綁定

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) Data_Binding();
}
private void Data_Binding()
{
    ListBoxHeavenlyStem.DataSource = GetHeavenStem();
    ListBoxHeavenlyStem.DataTextField = "Name";
    ListBoxHeavenlyStem.DataValueField = "ID";
    ListBoxHeavenlyStem.DataBind();
}

JavaScript 驗證函式

<script type="text/javascript">
function ValidateListBox(sender, args) {
    // 取得 ListBox 渲染後的客戶端 DOM 元素
    var lb = document.getElementById("<%=ListBoxHeavenlyStem.ClientID%>");
    var options = lb.options;
    
    args.IsValid = false; // 預設驗證失敗
    
    for (var i = 0; i < options.length; i++) {
        if (options[i].selected) {
            args.IsValid = true; // 發現選中項目，驗證通過
            return;
        }
    }
    // 迴圈結束未返回，args.IsValid 保持 false
}
</script>

核心機制解析

ListBox DOM 結構說明

ListBox 渲染為 <select multiple>，其 options 集合即為所有 <option> 元素。option.selected 屬性表示是否被選取。

進階擴充：取得所有選中值

function GetSelectedValues(listBoxClientID) {
    var lb = document.getElementById(listBoxClientID);
    var values = [];
    for (var i = 0; i < lb.options.length; i++) {
        if (lb.options[i].selected) {
            values.push(lb.options[i].value);
        }
    }
    return values; // 陣列格式，可傳給後端或進一步處理
}

後端驗證補強（防繞過）

protected void Button1_Click(object sender, EventArgs e)
{
    if (!Page.IsValid) return; // 客戶端驗證失敗不執行
    
    // 伺服器端二次驗證
    if (ListBoxHeavenlyStem.GetSelectedIndices().Length == 0)
    {
        CustomValidator1.IsValid = false;
        return;
    }
    
    // 業務邏輯...
}