嗨,我在表单上所需的字段验证器文本的位置有问题。我想将其移动到标签旁边或文本框旁边。我曾尝试将代码移动到texbox之后和最后一个之前,但仍然无法正常工作。这是我的代码:
<div class="container" id="containerform" style="max-width: 700px;padding: 10px 20px; background: #cac9c9; margin: 10px auto; padding: 20px; border-radius: 8px;">
<div class="form-horizontal">
<fieldset>
<!-- Text input-->
<fieldset><span class="number" style="background: #005EB8; color: #ffffff; height: 30px; width: 30px; display: inline-block;font-size: 0.8em; margin-right: 4px; line-height: 30px; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,0.2); border-radius: 15px 15px 15px 0px; margin-top: 3px;">1</span> PERSONAL</fieldset>
<div class="form-group">
<asp:label runat="server" class="col-md-4 control-label" id="matronName" style="width:130px; margin-top:5px; font-weight:bold">Ward Matron</asp:label>
<div class="col-md-4">
<asp:TextBox runat="server" ID="txtMatronName" CssClass="form-control" placeholder="" ReadOnly="true" style="width:436px; margin-top:5px;"/>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<asp:label runat="server" class="col-md-4 control-label" id="Email" style="width:130px; margin-top:5px; font-weight:bold">Email</asp:label>
<div class="col-md-4">
<asp:TextBox runat="server" ID="txtEmail" CssClass="form-control" placeholder="" ReadOnly="true" style="width:436px; margin-top:5px;"/>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<asp:label runat="server" class="col-md-4 control-label" id="Label1" style="width:130px; margin-top:5px; font-weight:bold">Ward</asp:label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
runat="server"
Forecolor ="Red"
ErrorMessage="*"
Text="*"
InitialValue="none"
ControlToValidate="SelectWard"
ValidationGroup="ValidationButton"
style="margin-right:20px; margin-bottom:20px;">
</asp:RequiredFieldValidator>
<div class="col-md-4">
<asp:DropDownList ID="SelectWard" runat="server" DataTextField="WardName" DataValueField="WardName" CssClass="form-control" style="width:436px; margin-top:5px;">
<asp:ListItem Selected="True" Value="none">Select</asp:ListItem>
<asp:ListItem>Neurology</asp:ListItem>
<asp:ListItem>Cardiology</asp:ListItem>
<asp:ListItem>Obstetrics & Gynacology</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<!-- Select Basic -->
<fieldset><span class="number" style="background: #005EB8; color: #ffffff; height: 30px; width: 30px; display: inline-block;font-size: 0.8em; margin-right: 4px; line-height: 30px; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,0.2); border-radius: 15px 15px 15px 0px; margin-top: 3px;">2</span> SHIFT DETAIL</fieldset>
<div class="form-group">
<asp:label runat="server" class="col-md-4 control-label" id="selectshifttype" style="width:130px; margin-top:5px; font-weight:bold">Shift Type</asp:label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2"
runat="server"
Forecolor ="Red"
ErrorMessage="*"
Text="*"
InitialValue="none"
ControlToValidate="ShiftType"
ValidationGroup="ValidationButton">
</asp:RequiredFieldValidator>
<div class="col-md-4" style="height:30px;">
<asp:DropDownList ID="ShiftType" runat="server" DataTextField="ShiftTypeName" DataValueField="ShiftTypeName" CssClass="form-control" style="width:436px; margin-top:5px;">
<asp:ListItem Selected="True" Value="none">Select</asp:ListItem>
<asp:ListItem>Morning</asp:ListItem>
<asp:ListItem>Night</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<asp:label runat="server" class="col-md-4 control-label" id="dateSubmit" style="width:130px; margin-top:5px; font-weight:bold">Date of Submission</asp:label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3"
runat="server"
Forecolor ="Red"
ErrorMessage="*"
Text="*"
ControlToValidate="txtDateSubmit"
ValidationGroup="ValidationButton">
</asp:RequiredFieldValidator>
<div class="col-md-4">
<div class='input-group date' id='datepicker' style="margin-top:15px;">
<asp:TextBox ID="txtDateSubmit" runat="server" CssClass="form-control" ReadOnly="false" style="width:400px;"></asp:TextBox>
<span class="input-group-addon" style="height:30px">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datepicker').datetimepicker({
format: 'DD/MM/YYYY',
});
});
</script>
<!-- Text input-->
<div class="form-group">
<asp:label runat="server" class="col-md-4 control-label" id="Lblstartdate" style="width:130px; margin-top:5px;font-weight:bold">Date Shift Start</asp:label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4"
runat="server"
Forecolor ="Red"
ErrorMessage="*"
Text="*"
ControlToValidate="txtStartDate"
ValidationGroup="ValidationButton">
</asp:RequiredFieldValidator>
<div class="col-md-4">
<div class='input-group date' id='datetimepicker2' style="margin-top:5px;">
<asp:TextBox ID="txtStartDate" runat="server" CssClass="form-control" ReadOnly="false" style="width:400px;"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>
<script>
$(function() {
$('#datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY'
});
});
</script>
<!-- Text input-->
<div class="form-group">
<asp:label runat="server" class="col-md-4 control-label" id="Lblstarttime" style="width:130px; margin-top:5px; font-weight:bold">Start Time</asp:label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5"
runat="server"
Forecolor ="Red"
ErrorMessage="*"
Text="*"
ControlToValidate="txtStartTime"
ValidationGroup="ValidationButton">
</asp:RequiredFieldValidator>
<div class="col-md-4">
<div class='input-group date' id='timepicker1' style="margin-top:5px;">
<asp:TextBox ID="txtStartTime" runat="server" CssClass="form-control" ReadOnly="false" style="width:400px;"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time">
</span>
</span>
</div>
</div>
</div>
<script>
$(function() {
$('#timepicker1').datetimepicker({
format: 'LT'
});
});
</script>
<!-- Text input-->
<div class="form-group">
<asp:label runat="server" class="col-md-4 control-label" id="Lbltimeend" style="width:130px; margin-top:5px; font-weight:bold">Time End</asp:label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator6"
runat="server"
Forecolor ="Red"
ErrorMessage="*"
Text="*"
ControlToValidate="txtTimeEnd"
ValidationGroup="ValidationButton">
</asp:RequiredFieldValidator>
<div class="col-md-4">
<div class='input-group date' id='timepicker2' style="margin-top:5px;">
<asp:TextBox ID="txtTimeEnd" runat="server" CssClass="form-control" ReadOnly="false" style="width:400px;"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time">
</span>
</span>
</div>
</div>
</div>
<script>
$(function () {
$('#timepicker2').datetimepicker({
format: 'LT'
});
});
</script>
<!-- Select Basic -->
<div class="form-group">
<asp:label runat="server" class="col-md-4 control-label" id="LblReason" style="width:130px; margin-top:5px; font-weight:bold">Reason</asp:label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator7"
runat="server"
Forecolor ="Red"
ErrorMessage="*"
Text="*"
InitialValue="none"
ControlToValidate="ShiftReason"
ValidationGroup="ValidationButton">
</asp:RequiredFieldValidator>
<div class="col-md-4">
<asp:DropDownList ID="ShiftReason" runat="server" CssClass="form-control" style="width:436px; margin-top:5px;">
<asp:ListItem Selected="True" Value="none">Select</asp:ListItem>
<asp:ListItem>Sickness</asp:ListItem>
<asp:ListItem>Personal</asp:ListItem>
<asp:ListItem>Others</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<asp:label runat="server" class="col-md-4 control-label" id="LblOptions" style="width:130px; font-weight:bold">Options</asp:label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator8"
runat="server"
Forecolor ="Red"
ErrorMessage="*"
Text="*"
ControlToValidate="txtOptions"
ValidationGroup="ValidationButton">
</asp:RequiredFieldValidator>
<div class="col-md-4">
<asp:TextBox runat="server" ID="txtOptions" CssClass="form-control" placeholder="" TextMode="MultiLine" style="width:436px;"/>
</div>
</div>
<fieldset><span class="number" style="background: #005EB8; color: #ffffff; height: 30px; width: 30px; display: inline-block;font-size: 0.8em; margin-right: 4px; line-height: 30px; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,0.2); border-radius: 15px 15px 15px 0px; margin-top: 3px;">3</span>SELECT SCM OR PATIENT FLOW MANAGER</fieldset>
<asp:RequiredFieldValidator ID="RequiredFieldValidator9"
runat="server"
Forecolor ="Red"
ErrorMessage="*"
Text="*"
InitialValue="none"
ControlToValidate="SelectSCM"
ValidationGroup="ValidationButton">
</asp:RequiredFieldValidator>
<div class="form-group">
<%--<label class="col-md-4 control-label" for="selectscm">Select SCM or Patient Flow Manager</label>--%>
<div class="col-md-4">
<asp:DropDownList ID="SelectSCM" runat="server" CssClass="form-control" style="width:520px; margin-top:5px; margin-left:50px">
<asp:ListItem Selected="True" Value="none">Select</asp:ListItem>
<asp:ListItem>Keith Smith</asp:ListItem>
<asp:ListItem>Barack Obama</asp:ListItem>
<asp:ListItem>Adam Bano</asp:ListItem>
</asp:DropDownList>
<br>
<asp:Button ID="BtnSubmit" runat="server" Text="Submit" class="btn btn-default" OnClick="Submit_Click" ValidationGroup="ValidationButton" Style="position: relative;display: block; padding: 19px 39px 18px 39px; color: #FFF; margin: 0 auto; background: #005EB8; font-size: 18px; text-align: center; font-style: normal; height: 70px; width: 100%; border: 1px solid #005EB8; border-width: 1px 1px 3px; margin-left:230px; margin-bottom: 10px;" />
</div>
</div>
</fieldset>
</div>
</div>
</asp:content>
请参阅该图像以获取表单屏幕截图: screenshot