Gcobani Mkontwana

Gcobani Mkontwana

  • 565
  • 1.9k
  • 406.8k

Borders of textbox are fading away when validated?

Mar 23 2020 4:39 AM
Hi Team
 
I have textbox and before a user leaves its been validated with label error message, now the problem is on the border itself its fading out with being empty in between error label message, who can assist me that this issue not showing this to a user. 
    1.                        <div class="row">  
    2.                         <div class="input-group col-md-4 col-md-offset-2 col-sm-2 col-xs-2">  
    3.                             <div class="input-group pull-right">  
    4.                                 <label for="Email">Email:</label>  
    5.                                                    
    6.                                 @Html.TextBoxFor(m => m.HomeMainModel.Email, new  
    7.                               {  
    8.                                   @class = "form-control",  
    9.                                   type = "email",  
    10.                                   id = "inputEmail",  
    11.                                   placeholder = "Email address",  
    12.                                   autofocus = "autofocus"  
    13.                               })  
    14.                                 <label id="labelMessage" class="text-danger" style="display:none">This field is required</label>  
    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. 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.   
    43.   
    44.   
    45. /script>  
 

Answers (4)