当显示无效的反馈消息时打破输入图标

Question

这是我的错误：

这是我的代码：

<div class="col-12">
    <div class="form-group has-icon-left">
        <label class="form-label" for="first-name-icon">Company Name</label>
        <div class="position-relative ">
            <input asp-for="Name" type="text" class="form-control"
                   placeholder="Company Name"
                   id="first-name-icon" aria-describedby="inputGroupPrepend" required />
            <div class="form-control-icon">
                <i class="bi bi-person "></i>
            </div>
            <span class="invalid-feedback ">Please provide a company name.</span>
        </div>
    </div>
    <div>
        <span class="text-danger" asp-validation-for="Name"></span>
    </div>
</div>

我想为客户端验证显示无效的反馈错误消息，但是当我在输入框下显示错误消息时，时间输入图标会破坏形状。

Answer 1

试着把它放在表单组之后。

 <div class="col-12">
    <div class="form-group has-icon-left">
        ...
    </div>

    <span class="invalid-feedback ">Please provide a company name.</span>

    <div>
        <span class="text-danger" asp-validation-for="Name"></span>
    </div>
</div>