#asp.net #html #twitter-bootstrap-3 #webforms
#asp.net #HTML #twitter-bootstrap-3 #веб-формы
Вопрос:
Я создал ASP.NET форма пользовательского ввода с использованием Bootstrap со следующим фрагментом HTML:
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<asp:UpdatePanel ID="updSignIn" runat="server">
<ContentTemplate>
<div class="panel panel-default">
<div class="panel-heading">
Set Up Your Member Account
</div>
<div class="panel-body">
<div class="form-horizontal" role="form">
<div class="form-group">
<label for="ddSalutation" class="col-sm-4 control-label">
How Do We Greet You?
</label>
<div class="col-sm-2">
<asp:DropDownList ID="ddSalutation" runat="server" CssClass="form-control" />
</div>
</div>
<div class="form-group">
<label for="tbFirstName" class="col-sm-4 control-label">
First Name:
</label>
<div class="col-sm-5">
<input type="text" runat="server" class="form-control" id="tbFirstName"
required placeholder="Enter your first name">
</div>
</div>
<div class="form-group">
<label for="tbMiddleName" class="col-sm-4 control-label">
Middle Name/Initial:
</label>
<div class="col-sm-5">
<input type="text" runat="server" class="form-control" id="tbMiddleName"
required placeholder="Enter your middle name/initial">
</div>
</div>
<div class="form-group">
<label for="tbLastName" class="col-sm-4 control-label">
Last Name:
</label>
<div class="col-sm-5">
<input type="text" runat="server" class="form-control" id="tbLastName"
required placeholder="Enter your last name">
</div>
</div>
<div class="form-group">
<label for="tbPhone" class="col-sm-4 control-label">
Contact Telephone:
</label>
<div class="col-sm-3">
<input type="tel" title="Telephone Number" pattern="^d{3}-d{3}-d{4}$"
id="tbPhone" placeholder="Telephone" class="form-control"
required runat="server" />
</div>
</div>
<div class="form-group">
<label for="tbSSN" class="col-sm-4 control-label">
SSN/Tax ID Number:
</label>
<div class="col-sm-3">
<input type="text" pattern="^d{3}-d{2}-d{4}$"
title="Social Security Number" runat="server" class="form-control" id="tbSSN"
required placeholder="SSN/Tax ID">
</div>
</div>
<div class="spacer">amp;nbsp;</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-7" id="buttons">
<asp:Button ID="btnNext" runat="Server"
Text="Next"
CssClass="btn btn-default btn-sm col-sm-4"
OnClick="btnNext_Click"></asp:Button>
<button type="reset" id="btnReset" class="btn btn-default btn-sm col-sm-4">
Reset Form</button>
</div>
</div>
<div class="row">
<div class="spacer">amp;nbsp;</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="text-center" id="divProcessing" style="display: none;">
<img src="imagesloading.gif" style="height: 40px; width: 40px;" />amp;nbsp;Please wait...
</div>
<div class="row">
<div class="alert alert-danger fade col-sm-offset-1 col-sm-10 text-center" id="lblStatus">amp;nbsp;</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
Форма изложена просто отлично. Проблема в том, что когда я нажимаю кнопку для обработки формы, сообщения о проверке из Bootstrap не совпадают с полями, требующими внимания со стороны пользователя. Вот скриншот того, что происходит:
Как вы можете видеть, поле формы, требующее внимания, — это поле первого имени, но всплывающая подсказка из Bootstrap находится внизу справа. У меня нет искаженного HTML, поэтому я не понимаю, в чем проблема с расположением всплывающего сообщения. Любая помощь по этому поводу? Спасибо!
Комментарии:
1. Это не сообщение о проверке от Bootstrap, это встроенная проверка проверки вашего браузера (если вы не используете какой-либо сценарий проверки, о котором вы нам не говорите). Bootstrap не поставляется с проверкой из коробки, только возможность добавлять классы, которые показывают ошибки проверки. Попробуйте это в нескольких разных браузерах и посмотрите, отличается ли поведение. Тогда, возможно, стоит посмотреть, сможете ли вы воссоздать проблему в jsFiddle, чтобы мы могли посмотреть сами.
2. Ради 2 минут я создал jsFiddle. Я не вижу проблем в Chrome, а Firefox и IE, похоже, все равно не выполняют проверку — bootply.com/CoGRPGY55N
3. Вопрос в том, почему в Chrome всплывающее окно проверки отображается так далеко вниз по странице от поля, в котором обнаружена ошибка? CSS и HTML не показывают проблемы, поэтому я ее не понимаю. В браузере MS Edge отображается диалоговое окно под полем, в котором находится проблема, что является приемлемым, но Chrome помещает его в нижнюю часть формы, а не под или рядом с проверяемым полем.
4. Это странно, учитывая, что bootply работает нормально. Может быть связано с другими элементами на вашей странице. Попробуйте удалить все лишние части вашего сайта (например, контейнеры, заголовки и т.д.), Пока не останется только форма. Если оно не исправилось к тому времени, когда вы переходите только к форме, попробуйте удалить любой из ваших пользовательских css и посмотреть, исправится ли оно само. Вы должны постепенно сузить проблему до одного неудобного класса нечетных контейнеров.
5. Я не смог добраться до корня этой проблемы, поэтому в итоге переключился на модальное окно, в котором отображаются поля, требующие внимания для проверки. Я думаю, так на самом деле получается лучше. Спасибо за ваш совет, @Rob.