при отображении недопустимого сообщения обратной связи сломайте значок ввода

#html #bootstrap-4

#HTML #начальная загрузка-4

Вопрос:

Это моя ошибка:

введите описание изображения здесь

Это мой код:

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

Я хочу показать недопустимое сообщение об ошибке обратной связи для проверки клиента, но когда я показываю сообщение об ошибке под полем ввода, значок ввода времени нарушает форму.

Ответ №1:

Попробуйте поставить его после группы форм.

 lt;div class="col-12"gt;  lt;div class="form-group has-icon-left"gt;  ...  lt;/divgt;   lt;span class="invalid-feedback "gt;Please provide a company name.lt;/spangt;   lt;divgt;  lt;span class="text-danger" asp-validation-for="Name"gt;lt;/spangt;  lt;/divgt; lt;/divgt;  

Комментарии:

1. У меня больше полей ввода , я хочу показать все поля ввода с недопустимым сообщением об ошибке