Blazor中Bootstrap 5表单验证消息不显示的解决咨询

问题分析 #

核心问题是Blazor的DataAnnotationsValidator默认不会自动适配Bootstrap 5的验证样式规则：

• Bootstrap 5的.invalid-feedback默认是display:none，仅当父表单添加.was-validated类且对应输入框带有.is-invalid类时，才会显示错误消息。
• 你的代码存在字段名拼写错误：CheckoutViewModel.FirsName应为FirstName，这会导致绑定失效，验证逻辑无法触发。

解决方案 #

步骤1：修正ViewModel的验证属性 #

确保CheckoutViewModel添加正确的数据注解验证，且字段名拼写无误：

public class CheckoutViewModel
{
    [Required(ErrorMessage = "Valid first name is required.")]
    public string FirstName { get; set; }

    [Required(ErrorMessage = "Valid last name is required.")]
    public string LastName { get; set; }
}

步骤2：修改Blazor表单代码，适配Bootstrap样式 #

通过EditContext手动控制验证状态和Bootstrap样式类，确保提交时错误消息正常显示：

<EditForm @ref="editForm" Model="CheckoutViewModel" OnSubmit="@HandleSubmit" 
          id="payment-form" class="needs-validation" novalidate>
    <DataAnnotationsValidator />

    <div class="row g-3">
        <div class="col-sm-6">
            <label for="firstName" class="form-label">First name</label>
            <InputText type="text" @bind-Value="CheckoutViewModel.FirstName" 
                      class="form-control @editContext.FieldCssClass(nameof(CheckoutViewModel.FirstName))" 
                      id="firstName" />
            <div class="invalid-feedback">
                @editContext.GetValidationMessages(nameof(CheckoutViewModel.FirstName)).FirstOrDefault()
            </div>
        </div>

        <div class="col-sm-6">
            <label for="lastName" class="form-label">Last name</label>
            <InputText type="text" @bind-Value="CheckoutViewModel.LastName" 
                      class="form-control @editContext.FieldCssClass(nameof(CheckoutViewModel.LastName))" 
                      id="lastName" />
            <div class="invalid-feedback">
                @editContext.GetValidationMessages(nameof(CheckoutViewModel.LastName)).FirstOrDefault()
            </div>
        </div>
    </div>

    <hr class="my-4">

    <button id="submit" class="w-100 btn btn-primary btn-lg" type="submit">Make Secure Payment</button>
</EditForm>

@code {
    private EditForm editForm;
    private EditContext editContext;
    private CheckoutViewModel CheckoutViewModel = new();

    protected override void OnInitialized()
    {
        editContext = new EditContext(CheckoutViewModel);
    }

    private async Task HandleSubmit()
    {
        bool isValid = editContext.Validate();
        var formElement = editForm.Element;

        if (formElement != null)
        {
            if (isValid)
            {
                formElement.ClassList.Remove("was-validated");
                await HandleValidSubmit();
            }
            else
            {
                formElement.ClassList.Add("was-validated");
            }
        }
    }

    private async Task HandleValidSubmit()
    {
        // 此处编写表单提交逻辑，例如调用支付API等
    }
}

关键说明 #

1. FieldCssClass方法：Blazor的EditContext提供该方法，会根据字段验证结果返回is-invalid（验证失败）或is-valid（验证成功）类，自动给输入框添加Bootstrap验证样式。
2. 手动控制was-validated类：提交表单时，验证失败则给表单添加was-validated类，触发Bootstrap显示.invalid-feedback；验证成功则移除该类，隐藏错误消息。
3. 动态获取验证消息：通过editContext.GetValidationMessages()直接获取ViewModel中定义的错误提示，无需硬写在页面，保持代码一致性。

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