所需的字段验证器定位asp.net

时间:2018-11-15 11:51:54

标签: c# asp.net twitter-bootstrap requiredfieldvalidator

嗨,我在表单上所需的字段验证器文本的位置有问题。我想将其移动到标签旁边或文本框旁边。我曾尝试将代码移动到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 &amp; 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

0 个答案:

没有答案