Blazor EditForm：禁用按钮致未触碰字段标记无效的解决方法

你当前的问题出在按钮禁用逻辑里直接调用了_context.Validate()——这个方法会触发整个表单的验证流程，同时通知所有ValidationMessage组件更新状态，所以哪怕只是点击进入Name字段，未填写的Description也会立刻显示错误提示。

我们可以通过手动验证模型状态但不触发UI验证提示来控制按钮禁用，只在用户点击提交时才显示完整的验证错误，实现类似Angular中表单状态控制的效果。

实现步骤及完整代码 #

@page "/form"
@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Components.Forms
@using System.Collections.Generic

<EditForm EditContext="_context">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <hr />
    <div class="form-group row">
        <label for="Name" class="col-sm-2 col-form-label">
            First Name
        </label>
        <div class="col-sm-10">
            <InputText id="Name" class="form-control" placeholder="First Name"
                       @bind-Value="_applicant.Name" />
            <ValidationMessage For="@(() => _applicant.Name)" />
        </div>
        <div class="col-sm-10 offset-sm-2 mt-2">
            <InputText id="Des" class="form-control" placeholder="Description"
                       @bind-Value="_applicant.Description" />
            <ValidationMessage For="@(() => _applicant.Description)" />
        </div>
    </div>
    <button class="btn btn-primary mt-3" type="submit" disabled="@(!_isFormValid)" @onclick="HandleSubmit">Send</button>
</EditForm>

@code {
    private EditContext _context;
    private Applicant _applicant = new Applicant();
    private bool _isFormValid;

    protected override void OnInitialized()
    {
        _context = new EditContext(_applicant);
        // 初始化时先验证一次模型状态
        ValidateModel();
        // 订阅字段变更事件，实时更新表单有效性状态
        _context.FieldChanged += (sender, args) => ValidateModel();
    }

    // 手动验证模型，不触发UI更新
    private void ValidateModel()
    {
        var validationContext = new ValidationContext(_applicant);
        var validationResults = new List<ValidationResult>();
        _isFormValid = Validator.TryValidateObject(_applicant, validationContext, validationResults, validateAllProperties: true);
    }

    private void HandleSubmit()
    {
        // 点击提交时才触发完整UI验证，显示错误提示
        if (_context.Validate())
        {
            // 这里处理表单提交逻辑
            Console.WriteLine("表单提交成功");
        }
    }

    public class Applicant
    {
        public int Id { get; set; }

        [Required]
        public string Name { get; set; } = string.Empty;

        [Required]
        public string Description { get; set; } = string.Empty;
    }
}

核心逻辑说明 #

1. 手动验证模型：用Validator.TryValidateObject代替_context.Validate()判断表单有效性，这个方法仅返回验证结果，不会通知Blazor的UI组件更新验证状态，避免输入框提前显示错误提示。
2. 实时更新按钮状态：通过订阅FieldChanged事件，每次用户修改字段时重新验证模型，更新_isFormValid变量，从而正确控制按钮的禁用/启用状态。
3. 提交时触发UI验证：只有用户点击提交按钮时，才调用_context.Validate()触发UI组件显示验证错误，符合常规的表单交互逻辑。

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