CheckBox 必選驗證：CustomValidator 搭配 Client 端 JavaScript 實作

問題本質

CheckBox 無內建 Required 驗證，且值為 Boolean（勾選/未勾選），一般 RequiredFieldValidator 無法直接套用。

標準解法：CustomValidator + ClientValidationFunction

<asp:CheckBox ID="chkAgree" runat="server" Text="我同意服務條款" />
<asp:CustomValidator ID="cvAgree" runat="server" 
    ErrorMessage="請勾選同意條款" 
    ForeColor="Red" 
    ClientValidationFunction="validateCheckBox"
    ValidateEmptyText="true" />
<br />
<asp:Button ID="btnSubmit" runat="server" Text="送出" />

<script>
function validateCheckBox(sender, args) {
    var chk = document.getElementById('<%= chkAgree.ClientID %>');
    args.IsValid = chk.checked;
}
</script>

關鍵屬性說明

• ClientValidationFunction：指定客戶端驗證函式名稱
• ValidateEmptyText="true"：即使控制項「看起來」為空也執行驗證（CheckBox 預設不觸發）
• ControlToValidate：不需設定，CustomValidator 驗證邏輯在函式內自行取得元素

伺服器端同步驗證（防繞過）

protected void cvAgree_ServerValidate(object source, ServerValidateEventArgs args) {
    args.IsValid = chkAgree.Checked;
}

在 CustomValidator 加上 OnServerValidate="cvAgree_ServerValidate"，確保停用 JS 的瀏覽器或惡意繞過仍被攔截。

多個 CheckBox 至少勾選一個（群組驗證）

function validateAtLeastOne(sender, args) {
    var container = document.getElementById('<%= pnlOptions.ClientID %>');
    var checkboxes = container.querySelectorAll('input[type="checkbox"]');
    args.IsValid = Array.from(checkboxes).some(function(cb) { return cb.checked; });
}

現代替代方案：HTML5 required + 原生 CheckBox

<input type="checkbox" id="chkAgree" name="agree" required />
<label for="chkAgree">我同意服務條款</label>

瀏覽器原生表單驗證，無需 JavaScript，但需自行處理伺服器端對應。

最佳實踐清單

• CustomValidator 同時實作 Client/Server 端驗證
• 錯誤訊息具體明確（如「請勾選同意隱私權政策」）
• 搭配 `ValidationSummary` 統一顯示錯誤
• 送出按鈕設定 CausesValidation="true"（預設值）