Post
Ask Question

jQuery: Display Warning Icon Inside a TextBox

Here's a quick example on how to display a warning icon inside a TextBox when validation fails.
  1. <head>  
  2.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  3.      <style type="text/css">  
  4.         .warning{  
  5.             background: url(warning.png) no-repeat;  
  6.             padding-left: 18px;  
  7.             border:1px solid #ccc;  
  8.         }  
  9.     </style>  
  10.     <script>  
  11.      $(function () {  
  12.                $("#txt").keypress(function (e) {  
  13.                //if the letter is not digit then display error and don't type anything  
  14.                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {  
  15.                //attach css  
  16.                     $("#txt").addClass("warning");  
  17.                     $("#txt").val("");  
  18.                     return false;  
  19.                 }  
  20.                 else{  
  21.                      $("#txt").removeClass("warning")  
  22.                 }  
  23.                });  
  24.            });  
  25.     </script>  
  26. </head>  
  27. <body>  
  28.     <input type = "text" id="txt"/>  
  29. </body>  
You can see the actual demo here:  http://jsfiddle.net/xoh7jm3c/10/