<p>我有一个使用 Bootstrap 5.1.0 的 Blazor 网页，其形式如下，验证纯粹是客户端：</p> <pre class="brush:php;toolbar:false;">&lt;EditForm Model=&quot;CheckoutViewModel&quot; OnValidSubmit=&quot;@HandleValidSubmit&quot; id=&quot;payment-form&quot; class=&quot;needs-validation&quot; novalidate=&quot;novalidate&quot;&gt; &lt;DataAnnotationsValidator /&gt; &lt;div class=&quot;row g-3&quot;&gt; &lt;div class=&quot;col-sm-6&quot;&gt; &lt;label for=&quot;firstName&quot; class=&quot;form-label&quot;&gt;First name&lt;/label&gt; &lt;InputText type=&quot;text&quot; @bind-Value=&quot;CheckoutViewModel.FirsName&quot; class=&quot;form-control&quot; id=&quot;firstName&quot; /&gt; &lt;div class=&quot;invalid-feedback&quot;&gt; Valid first name is required. &lt;/div&gt; &lt;div data-lastpass-icon-root=&quot;true&quot; style=&quot;position: relative !important; height: 0px !important; width: 0px !important; float: left !important;&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;col-sm-6&quot;&gt; &lt;label for=&quot;lastName&quot; class=&quot;form-label&quot;&gt;Last name&lt;/label&gt; &lt;InputText type=&quot;text&quot; @bind-Value=&quot;CheckoutViewModel.LastName&quot; class=&quot;form-control&quot; id=&quot;lastName&quot; /&gt; &lt;div class=&quot;invalid-feedback&quot;&gt; Valid last name is required. &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;hr class=&quot;my-4&quot;&gt; &lt;button id=&quot;submit&quot; class=&quot;w-100 btn btn-primary btn-lg&quot; type=&quot;submit&quot;&gt;Make Secure Payment&lt;/button&gt; &lt;/EditForm&gt;</pre> <p>每次我提交表单时，这就是我看到的验证明智的内容：</p> <p>如果我检查包含无效反馈类的 div，它会被设置为 <code>display:none</code>，因此它不会显示。</p> <p>我在互联网上搜索，试图找到一种显示验证消息的方法，但无济于事。有些人建议将 d-block 类放在 div 上，但是如果我这样做，验证消息将永久显示。</p> <p>当表单以空值提交时，如何让验证消息显示在输入下方，如下所示：</p>

<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>