Blazor Server中InputSelect组件无法标记为无效的问题求助

1. 确认绑定与验证属性关联 #

确保DTO中的County和AddressType字段已正确添加自定义的[GuidSelectValidation]属性，且InputSelect使用双向绑定@bind-Value关联对应字段，绑定字段类型必须为Guid。

示例DTO定义：

public class AddressDto
{
    [GuidSelectValidation(ErrorMessage = "请选择有效的地区")]
    public Guid County { get; set; }

    [GuidSelectValidation(ErrorMessage = "请选择有效的地址类型")]
    public Guid AddressType { get; set; }
}

2. 确保验证样式存在 #

Blazor在验证失败时会给Input组件添加invalid类（原生样式）或is-invalid类（Bootstrap样式），需确保你的CSS中包含对应样式：

原生样式示例 #

.invalid {
    border: 1px solid #dc3545;
    background-color: #f8d7da;
}

Bootstrap样式示例（若项目引用Bootstrap） #

确保InputSelect的class包含form-control，Bootstrap会自动为is-invalid类添加红色边框：

<InputSelect @bind-Value="AddressDto.County" class="form-control">
    <!-- 选项内容 -->
</InputSelect>

3. 让自定义验证支持客户端验证 #

如果仅实现服务器端验证，InputSelect可能不会即时更新样式。需让GuidSelectValidationAttribute实现IClientModelValidator接口，并添加客户端验证脚本：

自定义验证属性实现 #

public class GuidSelectValidationAttribute : ValidationAttribute, IClientModelValidator
{
    public override bool IsValid(object value)
    {
        return value is Guid guid && guid != Guid.Empty;
    }

    public void AddValidation(ClientModelValidationContext context)
    {
        if (context == null)
            throw new ArgumentNullException(nameof(context));

        // 添加客户端验证标记
        MergeAttribute(context.Attributes, "data-val", "true");
        MergeAttribute(context.Attributes, "data-val-guidselect", ErrorMessage ?? "请选择有效选项");
    }

    private static void MergeAttribute(IDictionary<string, string> attributes, string key, string value)
    {
        if (!attributes.ContainsKey(key))
        {
            attributes.Add(key, value);
        }
    }
}

客户端验证脚本（wwwroot/js/guid-validation.js） #

(function ($) {
    // 定义验证规则：值不能为空Guid
    $.validator.addMethod("guidselect", function (value, element) {
        return this.optional(element) || value !== "00000000-0000-0000-0000-000000000000";
    });

    // 关联到unobtrusive验证
    $.validator.unobtrusive.adapters.addBool("guidselect");
})(jQuery);

在页面中引用脚本（需先加载jQuery、jquery.validate、jquery.validate.unobtrusive）：

<script src="~/js/jquery.min.js"></script>
<script src="~/js/jquery.validate.min.js"></script>
<script src="~/js/jquery.validate.unobtrusive.min.js"></script>
<script src="~/js/guid-validation.js"></script>

4. 完善页面验证结构 #

确保InputSelect包裹在EditForm内，且已添加DataAnnotationsValidator和对应字段的ValidationMessage组件：

<EditForm Model="@AddressDto" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="mb-3">
        <label class="form-label">地区</label>
        <InputSelect @bind-Value="AddressDto.County" class="form-control">
            <option value="@Guid.Empty">请选择</option>
            @foreach (var county in CountyList)
            {
                <option value="@county.Id">@county.Name</option>
            }
        </InputSelect>
        <!-- 显示对应字段的验证信息，同时触发组件样式更新 -->
        <ValidationMessage For="@(() => AddressDto.County)" class="text-danger" />
    </div>

    <!-- 地址类型的InputSelect结构同上 -->

    <button type="submit" class="btn btn-primary">提交</button>
</EditForm>

5. 手动触发验证状态更新 #

若通过服务器端验证后才显示错误，可在提交方法中手动调用EditContext.Validate()，确保组件接收到验证状态变更：

private EditContext? _editContext;

protected override void OnInitialized()
{
    _editContext = new EditContext(AddressDto);
}

private async Task HandleValidSubmit()
{
    // 服务器端验证逻辑
    var isValid = await ValidateAddressAsync(AddressDto);
    if (!isValid)
    {
        // 手动通知验证状态变更
        _editContext?.NotifyValidationStateChanged();
        return;
    }
    // 后续提交逻辑
}

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