时间戳

首页 > 解决方案 > 如何解决正在下推标签的电子邮件的 Bootstrap 表单验证问题？

javascript - 如何解决正在下推标签的电子邮件的 Bootstrap 表单验证问题？

问题描述

我正在尝试解决 Visual Studio 网站中的一个问题，即使用 vb.net、asp.net 和 html、css 和 bootstrap。我必须在电子邮件地址下进行输入验证。一种目前有效，但用于联合电子邮件的一种一直在下推具有标签的输入组添加。我附上一张图片。请帮忙。 

 <div class="row" id="employeephonerow" runat="server">

     <div class="col-md-4" id="trtxtPhone" runat="server">
      <div class="input-group">
      <span class="input-group-addon">Employee Work Phone</span>
      <asp:TextBox ID="txtPhone" runat="server" CssClass="form-control"> 
 </asp:TextBox>
    </div>
      <asp:UpdatePanel ID="UpdatePanelPhoneVal" runat="server" UpdateMode="conditional">
    <ContentTemplate>
    <asp:RegularExpressionValidator ID="revPhone" 
        runat="server"
        ControlToValidate="txtPhone" 
        Display="Dynamic" 
        ErrorMessage="Format for phone is 999-999-9999." 
        ValidationExpression="^[01]?[- .]?(\([2-9]\d{2}\)|[2-9]\d{2})[- .]?\d{3}[- .]?\d{4}$" />
      </ContentTemplate>

      </asp:UpdatePanel>

      </div>

     <div class="col-md-4" id="trtxtGrievantEmail" runat="server">
     <div class="input-group">
     <span class="input-group-addon">Employee Email</span>
     <input class="form-control" runat="server" type="email" id="txtGrievantEmail" />
   </div>


   <asp:RegularExpressionValidator ID="revtxtGrievantEmail" 
                                runat="server"
                                Enabled="true"
                                ControlToValidate="txtGrievantEmail" CssClass="tdTextRedSmall"
                                Display="Dynamic" 
                                ErrorMessage="Invalid email address" Font-Names="Verdana" SetFocusOnError="true"
                                ValidationExpression="^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$">

   </asp:RegularExpressionValidator>

  <%--   asp:RequiredFieldValidator--%>

   <asp:RequiredFieldValidator ID="rfvtxtGrievantEmail" 
                               runat="server" 
                               ControlToValidate="txtGrievantEmail" CssClass="tdTextRedSmall" display="Dynamic"
                               Enabled="true" ErrorMessage="Enter a Email" 
                              Font-Names="Verdana" SetFocusOnError="false" validationgroup="vlgSubmit">

   </asp:RequiredFieldValidator>
   </div>

   </div>
   </div>

   <div class="row">
   <div class="col-md-4">
   <div class="input-group">
   <span class="input-group-addon">Union Steward/Rep*</span>




   <asp:TextBox ID="txtcboUnionRep" class="form-control" Style="" runat="server" ReadOnly="True" TabIndex="-1"></asp:TextBox>
   <asp:TextBox ID="txtUnionRepID" class="form-control" Style="" runat="server" Visible="false" TabIndex="-1"></asp:TextBox>
   </div>
   </div>


    <div class="col-md-4">
    <div class="input-group">
    <span class="input-group-addon">Union Email</span>
    <asp:TextBox ID="txtUnionRepEmail" onchange="jsUnionRepEmail_TextChanged();" runat="server" CausesValidation="true" CssClass="form-control" Style=""></asp:TextBox>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" style="margin-left: 5px;">
    <Triggers>

    <%--AsyncPostBackTrigger for union email--%>
    <asp:AsyncPostBackTrigger ControlID="txtUnionRepEmail" EventName="TextChanged" />

    </Triggers>

    <ContentTemplate>
    <asp:UpdatePanel ID="UpdatePanelUemailVal" runat="server" UpdateMode="conditional">
    <ContentTemplate>
        <div>
    <%--   RegularExpressionValidator  for Union Email--%>
    <asp:RegularExpressionValidator ID="revtxtUnionRepEmail" runat="server"
        ControlToValidate="txtUnionRepEmail" 
        CssClass="tdTextRedSmall" 
        Display="Dynamic" 
        EnableClientScript="true" 
        ErrorMessage="Invalid email address" 
        Font-Names="Verdana" 
        SetFocusOnError="false" 
        ValidationExpression="^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$" 
        Width="121px">
    </asp:RegularExpressionValidator>

   <asp:RequiredFieldValidator ID="rfvtxtUnionRepEmail" 
       runat="server" 
       ControlToValidate="txtUnionRepEmail" 
       CssClass="tdTextRedSmall" 
       Display="Dynamic" 
       EnableClientScript="True" 
       Enabled="true" 
       ErrorMessage="Enter an email address" 
       Font-Names="Verdana" 
       SetFocusOnError="false" 
       Width="148px"  
       validationgroup="vlgSubmit" >

   </asp:RequiredFieldValidator>

   </ContentTemplate>

   </asp:UpdatePanel>


   <asp:HiddenField ID="hdnUnionEmail" runat="server" />
   </ContentTemplate>
   </asp:UpdatePanel>
    </div>
   </div>
   </div>




   </div>

在此处输入图像描述

标签： javascriptasp.netvb.netvisual-studio

解决方案

尝试添加height到.input-group-addon并#rfvtxtUnionRepEmail添加disply:block; width:100%; text-align:left;

#rfvtxtUnionRepEmail或者在with之后添加一个空的 divclear:both; 或者试试这个

 <div class="row" id="employeephonerow" runat="server">
   <div class="col-md-4" id="trtxtPhone" runat="server">
      <div class="input-group">
         <span class="input-group-addon">Employee Work Phone</span>
         <asp:TextBox ID="txtPhone" runat="server" CssClass="form-control"> 
         </asp:TextBox>
      </div>
      <asp:UpdatePanel ID="UpdatePanelPhoneVal" runat="server" UpdateMode="conditional">
         <ContentTemplate>
            <asp:RegularExpressionValidator ID="revPhone" 
               runat="server"
               ControlToValidate="txtPhone" 
               Display="Dynamic" 
               ErrorMessage="Format for phone is 999-999-9999." 
               ValidationExpression="^[01]?[- .]?(\([2-9]\d{2}\)|[2-9]\d{2})[- .]?\d{3}[- .]?\d{4}$" />
         </ContentTemplate>
      </asp:UpdatePanel>
   </div>
   <div class="col-md-4" id="trtxtGrievantEmail" runat="server">
      <div class="input-group">
         <span class="input-group-addon">Employee Email</span>
         <input class="form-control" runat="server" type="email" id="txtGrievantEmail" />
      </div>
      <asp:RegularExpressionValidator ID="revtxtGrievantEmail" 
         runat="server"
         Enabled="true"
         ControlToValidate="txtGrievantEmail" CssClass="tdTextRedSmall"
         Display="Dynamic" 
         ErrorMessage="Invalid email address" Font-Names="Verdana" SetFocusOnError="true"
         ValidationExpression="^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$">
      </asp:RegularExpressionValidator>
      <%--   asp:RequiredFieldValidator--%>
      <asp:RequiredFieldValidator ID="rfvtxtGrievantEmail" 
         runat="server" 
         ControlToValidate="txtGrievantEmail" CssClass="tdTextRedSmall" display="Dynamic"
         Enabled="true" ErrorMessage="Enter a Email" 
         Font-Names="Verdana" SetFocusOnError="false" validationgroup="vlgSubmit">
      </asp:RequiredFieldValidator>
   </div>
</div>
</div>
<div class="row">
   <div class="col-md-4">
      <div class="input-group">
         <span class="input-group-addon">Union Steward/Rep*</span>
         <asp:TextBox ID="txtcboUnionRep" class="form-control" Style="" runat="server" ReadOnly="True" TabIndex="-1"></asp:TextBox>
         <asp:TextBox ID="txtUnionRepID" class="form-control" Style="" runat="server" Visible="false" TabIndex="-1"></asp:TextBox>
      </div>
   </div>
   <div class="col-md-4">
      <div class="input-group">
         <span class="input-group-addon">Union Email</span>
         <asp:TextBox ID="txtUnionRepEmail" onchange="jsUnionRepEmail_TextChanged();" runat="server" CausesValidation="true" CssClass="form-control" Style=""></asp:TextBox>
      </div>
      <div class="input-group">
         <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" style="margin-left: 5px;">
            <Triggers>
               <%--AsyncPostBackTrigger for union email--%>
               <asp:AsyncPostBackTrigger ControlID="txtUnionRepEmail" EventName="TextChanged" />
            </Triggers>
            <ContentTemplate>
               <asp:UpdatePanel ID="UpdatePanelUemailVal" runat="server" UpdateMode="conditional">
                  <ContentTemplate>
                     <div>
                        <%--   RegularExpressionValidator  for Union Email--%>
                        <asp:RegularExpressionValidator ID="revtxtUnionRepEmail" runat="server"
                           ControlToValidate="txtUnionRepEmail" 
                           CssClass="tdTextRedSmall" 
                           Display="Dynamic" 
                           EnableClientScript="true" 
                           ErrorMessage="Invalid email address" 
                           Font-Names="Verdana" 
                           SetFocusOnError="false" 
                           ValidationExpression="^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$" 
                           Width="121px">
                        </asp:RegularExpressionValidator>
                        <asp:RequiredFieldValidator ID="rfvtxtUnionRepEmail" 
                           runat="server" 
                           ControlToValidate="txtUnionRepEmail" 
                           CssClass="tdTextRedSmall" 
                           Display="Dynamic" 
                           EnableClientScript="True" 
                           Enabled="true" 
                           ErrorMessage="Enter an email address" 
                           Font-Names="Verdana" 
                           SetFocusOnError="false" 
                           Width="148px"  
                           validationgroup="vlgSubmit" >
                        </asp:RequiredFieldValidator>
                  </ContentTemplate>
               </asp:UpdatePanel>
               <asp:HiddenField ID="hdnUnionEmail" runat="server" />
            </ContentTemplate>
         </asp:UpdatePanel>
         </div>
      </div>
   </div>
</div>

让我知道

推荐阅读