Post
Ask Question

How To Blink Border When Validation Fails

Design
  1. <div style="margin:auto;width:80%"><br />  
  2.        User Name : <asp:TextBox ID="txtUser" runat="server" CssClass="normalBorder" /><br /><br />  
  3.        Password : <asp:TextBox ID="txtPass" runat="server" CssClass="normalBorder" /><br /><br />  
  4.        <asp:Button ID="btnValidate" runat="server" Text="Validate" />  
  5.    </div>  
Style
  1. <style type="text/css">  
  2.         .normalBorder{  
  3.             border:2px solid black;  
  4.         }  
  5.         .ValidateBorder{  
  6.             border:2px solid red;  
  7.         }  
  8.     </style>   
jQuery Code
  1. <script src="scripts/jquery-3.1.0.min.js"></script>  
  2. <script type="text/javascript">    
  3.        $(document).ready(function () {    
  4.             $("#btnValidate").click(function () {    
  5.                 if ($("#txtUser").val() == "") {    
  6.                        
  7.                     var $txt = $("#txtUser");    
  8.                     setInterval(function(){    
  9.                         $txt.toggleClass("ValidateBorder");    
  10.                     }, 500);    
  11.                     return false;    
  12.                 }    
  13.                 else {    
  14.                     $("#txtUser").class("normalBorder");    
  15.                 }    
  16.             });    
  17.             $("#txtUser").focus(function () {    
  18.                    
  19.                 $("#txtUser").css("borderColor", "black");    
  20.             });    
  21.         });    
  22.     </script>