我有一个使用Bootstrap5.1.0的Blazor网页，其形式如下，验证纯粹是客户端：<EditFormModel="CheckoutViewModel"OnValidSubmit="@HandleValidSubmit"id="payment-form"class="needs-validation"nov

Bootstrap 5 验证消息未显示

<p>我有一个使用 Bootstrap 5.1.0 的 Blazor 网页，其形式如下，验证纯粹是客户端：</p>


    >

    <div class=“行g-3”>

        <div class="col-sm-6">
            <标签=“firstName” class=“form-label”>名字
            >
            <div class="无效反馈">
                需要有效的名字。

<div class="col-sm-6"> <标签=“lastName” class=“form-label”>姓氏 > <div class="无效反馈"> 需要有效的姓氏。 <hr class="my-4"> <按钮id=“提交” class＝“w-100 btn btn-primary btn-lg” type=“提交”>进行安全付款 </EditForm></pre> <p>每次我看到提交表单时，这就是我的验证知识的内容：</p> <p>如果我检查包含无效反馈类的 div，它会被设置为 <code>display:none</code>，因此不会显示。</p> <p>我在互联网上搜索，试图找到一种显示验证消息的方法，但无济于事。有些人建议将 d-block 类放在 div 上，但如果我这样做，验证消息将永久显示。< /p> <p>当表单以空值提交时，如何让验证消息显示在输入下方，如下图：</p>

P粉391677921447 天前609

全部回复(1)我来回复

P粉0326494132023-09-07 00:10:29

答案是添加 ValidationMessage 组件，如下所示：

<div class="col-sm-6">
        <label for="firstName" class="form-label">First name</label>
        <InputText type="text" @bind-Value="CheckoutViewModel.FirstName" class="form-control" id="firstName" />
        <ValidationMessage For="@(() => CheckoutViewModel.FirstName)" />            
    </div>

取消回复