MVC复选框列表验证：如何仅显示一条“至少选一项”提示

1. 移除单个复选框的验证属性 #

首先删除tbl_Hazard_Classification类中isSelected字段上的验证属性，避免每个未勾选项都触发错误提示：

public partial class tbl_Hazard_Classification
{
    public int hazardid { get; set; }
    public string hazardname { get; set; }
    // 移除原有的[MustBeTrueAttribute]和[Display]属性
    public bool isSelected { get; set; }
}

2. 在视图模型中添加全局验证逻辑 #

让视图模型实现IValidatableObject接口，通过该接口验证整个复选框组是否至少有一项被选中：

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

public class YourViewModel : IValidatableObject
{
    public List<tbl_Hazard_Classification> HazardClassificationCheckBoxes { get; set; }

    public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
    {
        if (HazardClassificationCheckBoxes?.All(item => !item.isSelected) ?? true)
        {
            yield return new ValidationResult(
                "Please select a hazard!",
                new[] { nameof(HazardClassificationCheckBoxes) }
            );
        }
    }
}

3. 修改视图，显示单条全局验证提示 #

移除每个复选框旁的ValidationMessageFor，在复选框组的合适位置（比如表格上方或下方）添加全局验证提示：

<!-- 在复选框表格前添加全局验证提示 -->
@Html.ValidationMessageFor(x => x.HazardClassificationCheckBoxes, "", new { @class = "error" })

<table>
    @for (int i = 0; i < Model.HazardClassificationCheckBoxes.Count; i++)
    {
        if (i % 3 == 0)
        {
            @:<tr>
        }
        <td>
            @Html.CheckBoxFor(x => x.HazardClassificationCheckBoxes[i].isSelected, new { @class = "custom-checkbox" })
            <label>@Model.HazardClassificationCheckBoxes[i].hazardname</label>
            @Html.HiddenFor(x => x.HazardClassificationCheckBoxes[i].hazardid)
            @Html.HiddenFor(x => x.HazardClassificationCheckBoxes[i].hazardname)
            <!-- 移除单个复选框的验证提示 -->
        </td>
        @if ((i + 1) % 3 == 0 || i == Model.HazardClassificationCheckBoxes.Count - 1)
        {
            @:</tr>
        }
    }
</table>

4. 控制器逻辑保持不变 #

原有的控制器代码无需修改，ModelState.IsValid会自动触发视图模型的全局验证：

if (ModelState.IsValid)
{
    // 执行业务逻辑
}

可选：添加客户端验证 #

如果需要客户端即时验证，可添加自定义客户端验证脚本，确保用户提交前就提示：

$(function() {
    $.validator.addMethod("atLeastOneSelected", function(value, element, params) {
        return $('input[name^="' + params + '"].custom-checkbox:checked').length > 0;
    }, "Please select a hazard!");

    $.validator.unobtrusive.adapters.add("atLeastOneSelected", ["collectionName"], function(options) {
        options.rules["atLeastOneSelected"] = options.params.collectionName;
        options.messages["atLeastOneSelected"] = options.message;
    });
});

内容的提问来源于stack exchange，提问作者fl13