Gcobani Mkontwana

Gcobani Mkontwana

  • 565
  • 1.9k
  • 405.7k

Texbox is not center focus when its validated shifts?

Mar 19 2020 9:24 AM
Hi Team
 
I need some improvement on my code, it validates the textbox for email, as soon it does it shift the texbox and allow that error be on the left. Could this be div class= input-group pull-left be the reason? See my logic and does not look right to a user it may lead to a bug. 
  1. <div class="row">  
  2.                           <label for"Email">Email:</label>  
  3.                           <label id="labelMessage" class="text-danger" style="display:none">This field is required</label>  
  4.                           <div class="input-group col-md-4 col-md-offset-2 col-sm-2 col-xs-2">  
  5.                               <div class="input-group pull-right">  
  6.                                                     
  7.                                   @Html.TextBoxFor(m => m.Email, new  
  8.                                 {  
  9.                                     @class = "form-control",  
  10.                                     type = "email",  
  11.                                     id = "inputEmail",  
  12.                                     placeholder = "Email address",  
  13.                                     autofocus = "autofocus"  
  14.                                 })  
  15.                                   <div class="input-group-append">  
  16.   
  17.                                       <div class="input-group-text">  
  18.   
  19.                                       </div>  
  20.                                   </div>  
  21.                               </div>  
  22.                           </div>  
  23.                       </div>  
  24.   
  25. t;script type='text/javascript'>  
  26.   $(function () {  
  27.       //When the blur event occurs from your Textbox (you lose focus)  
  28.       $('#inputEmail').blur(function () {  
  29.           var email = document.getElementById("inputEmail").value;  
  30.           var expr = /^([\w-\.]+)@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;  
  31.           if (!expr.test(email)) {  
  32.               document.getElementById("labelMessage").style.display = "inline";  
  33.           }  
  34.           else {  
  35.               document.getElementById("labelMessage").style.display = "none";  
  36.           }  
  37.       });  
  38.   });  
  39.   
  40.   
  41.   
  42. t;/script>  
 

Answers (2)