What steps can I take to resolve a Bootstrap form validation issue where the email field is causing the label to shift down?

I am currently troubleshooting an issue in a website using Visual Studio, which is built with VB.NET, ASP.NET, HTML, CSS, and Bootstrap. The problem lies in the input validation under the email addresses. While one validation is working fine, the validation for union email is causing the input-group addon containing the label to be displaced. I have attached a picture for reference. Any assistance would be greatly appreciated.

 <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>

view attached image

javascriptasp.netvb.netvisual-studio

Answer №1

Consider adding height to the .input-group-addon and for #rfvtxtUnionRepEmail include 

display:block; width:100%; text-align:left;

You can also insert an empty div following #rfvtxtUnionRepEmail with clear:both; or try the following

 <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>

Please inform me of any changes

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Only the initial submission is allowed when submitting forms using jQuery $.ajax

Encountering an issue with submitting AJAX forms after following this particular tutorial. The forms are contained within div#upform and upon attempting to submit any of them using $.ajax, only the first one is being submitted. The code snippet in questio ...

javascriptjqueryajax

Transform a base64 image into a blob format for transmission to the backend via a form

Is there a way to convert a base64 string image to a blob image in order to send it to the backend using a form? I've tried some solutions like this one, but they didn't work for me. function b64toBlob(b64Data, contentType='', sliceSiz ...

javascripttypescriptimagebase64blob

Using a Vue.js component in a Laravel Blade template can be achieved by first registering the component

I added a component registration in my app.js as shown below: Vue.component('navbar', require('./components/Navbar.vue')); Now I am looking to import that component into my blade.php file like so: <template> <nav class="navb ...

javascriptphplaravelvue.js

Performing a MongoDB query in a controller using the MEAN stack with Node.js

My goal with this controller is to retrieve all the results of a collection. Despite having one item in the prop collection, I am encountering an undefined error. Error: Cannot call method 'find' of undefined This snippet shows my server.js fil ...

javascriptnode.jsangularjsmongodbmean-stack

Out of nowhere, I started getting a 401 error from .net and jquery

My ajax call used to work perfectly: $J.ajax({ type: 'POST', url: "/ajax/getCharts", data: JSON.stringify(cids), dataType: 'json', asynch: false }) However, things changed yesterday. We implemented Microsoft.AspNet ...

jqueryasp.netasp.net-ajax

Refresh Angular component upon navigation

I have set up routes for my module: const routes: Routes = [ { path: ":level1/:level2/:level3", component: CategoriesComponent }, { path: ":level1/:level2", component: CategoriesComponent}, { path: ":level1", component: ...

javascriptangulartypescript

Error: The JSON in app.js is invalid due to the unexpected token "C" at position 0

When I try to run this code snippet, I sometimes encounter an error message that says: SyntaxError: Unexpected token C in JSON at position 0. function fetchData(user_country) { fetch(`https://covid19-monitor-pro.p.rapidapi.com/coronavirus/cases_by_day ...

javascripthtmlfetch-api

Grab the webpage's URL by collecting the link from the src attribute of the script tag using XSLT

Can XSLT be used to extract a URL link specified within the src attribute of a script tag in an HTML file? Here is an example of the HTML file: <HTML> <BODY> <SCRIPT language="javascript" src="http://myspace.com" type="text/javascript"> ...

javascripthtmlxmlxslt

Troubleshooting: Ineffective use of replace() function on input value with jQuery

Visit this link for a demo How can I update the input value based on user selection in a dropdown menu? The objective is to change the value from "service_######" to "membership##_####" when the user selects YES, but my current JavaScript code using repla ...

javascripthtmljquery

What is the best way to declare a global variable while making an asynchronous call using AngularJS?

Is there a way to utilize the single_video variable outside of the controller function? The issue arises when attempting to access it in the second console.log, as it returns an 'undefined' error due to asynchronousity despite successfully printi ...

javascriptangularjsasynchronous

vue implementing autoscroll for long lists

I am looking to implement an autoscrolling log feature on my webpage that is dynamically fetched from a REST endpoint. To handle the potentially large size of this log, I decided to use vue-virtual-scroll-list. Additionally, I wanted the log to automatical ...

javascriptvue.jsvuejs2

React js background image not filling the entire screen

Having experience with React Native, I decided to give ReactJS a try. However, I'm struggling with styling my components because CSS is not my strong suit. To build a small web application, I am using the Ant Design UI framework. Currently, I have a ...

javascriptcssreactjs

JS Issues with generating accurate dates in JS/JS Date perplexities

Creating a custom datepicker has been a challenging task for me. I'm facing difficulties in understanding how JS Date works and need some assistance to bridge this knowledge gap. The issue arises when I attempt to generate dates using a for loop, resu ...

javascriptreactjsdate

What is the best way to retrieve data from a database and display it in a select dropdown list

I'm working on creating a Bingo game and I want to include a dropdown list that displays my previous records. How can I retrieve data from a database to populate this select dropdown list? Below is the relevant code snippet in PHP: <html> < ...

javascriptphphtmljqueryajax

Guide on transferring control from a successful jQuery event to an HTML form

I am currently using the following jQuery code to validate user details. $.ajax({ type: "POST", url: "Login", data:'uname='+encodeURIComponent(uname)+'&'+'pass='+encodeURIComponent(pass), ...

javascriptjqueryhtml

Backing up a mongodb collection can be easily achieved with the help of express.js and Node.js

I am looking to create a monthly backup of my userdatas collection. The backup process involves: I intend to transfer the data from the userdatas collection to a designated backupuserdatas collection. A batch program should be scheduled to run automatica ...

javascriptnode.jsmongodbexpress

Tips for assigning a standard or custom value using JavaScript

What is the best way to automatically assign a value of 0 to my input field when the user leaves it blank? Should I use an if statement { } else { } ...

javascripthtmlformsinput

Open $_POST in a new tab that has been edited for your convenience

<form method="post" target="_blank" action="battle.php" onsubmit="window.open('battle.php','','width=700,height=500,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0,left=30,top=0');" > < ...

javascriptphphtmlcss

Having Trouble with Finding Visible Divs?

Below is the code snippet I am working with: var len = $(".per:visible").length; $("#add-person").click(function(){ if ($(".persons div:visible").next().is(':hidden')){ $(".persons div:visible").next().slideDown('slow' , ...

javascriptjquery

Issue with external JavaScript file being unresponsive on mobile browser

Hello everyone, hope you're having a great afternoon or evening I've encountered an issue with mobile browsers like Chrome Mobile and Kiwi where the external js file is not visible in the html file. The script.js file looks like this: alert(&ap ...

javascripthtmlmobileexternal