Advanced Search

Animate Validation feedback using jQuery

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Animate validation feedback using jQuery</title>
  5.     <style type="text/css">
  6.         body
  7.         {
  8.             font-family:Arial, Sans-Serif;
  9.             font-size:0.85em;
  10.         }
  11.         img 
  12.         {
  13.             border:none;
  14.         }
  15.         ul, ul li
  16.         {
  17.             list-style-type: none;
  18.             margin: 0;
  19.             padding: 0;
  20.         }
  21.         ul li.first
  22.         {
  23.             border-top: 1px solid #DFDFDF;
  24.         }
  25.         ul li.last
  26.         {
  27.             border: none;
  28.         }
  29.         ul p
  30.         {
  31.             float: left;
  32.             margin: 0;
  33.             width: 310px;
  34.         }
  35.         ul h3
  36.         {
  37.             float: left;
  38.             font-size: 14px;
  39.             font-weight: bold;
  40.             margin: 5px 0 0 0;
  41.             width: 200px;
  42.             margin-left:20px;
  43.         }
  44.         ul li
  45.         {
  46.             border-bottom: 1px solid #DFDFDF;
  47.             padding: 15px 0;
  48.             width:600px;
  49.             overflow:hidden;
  50.         }
  51.         ul input[type="text"], ul input[type="password"]
  52.         {
  53.             width:300px;
  54.             padding:5px;
  55.             position:relative;
  56.             border:solid 1px #666;
  57.             -moz-border-radius:5px;
  58.             -webkit-border-radius:5px;
  59.         }
  60.         ul input.required 
  61.         {
  62.             border: solid 1px #f00;
  63.         }
  64.     </style>
  65.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  66.     <script type="text/javascript">
  67.         $(document).ready(function() {
  68.             $("#signup").click(function() {
  69.  
  70.                 resetFields();
  71.                 var emptyfields = $("input[value=]");
  72.                 if (emptyfields.size() > 0) {
  73.                     emptyfields.each(function() {
  74.                         $(this).stop()
  75.                             .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
  76.                             .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
  77.                             .animate({ left: "0px" }, 100)
  78.                             .addClass("required");
  79.                     });
  80.                 }
  81.             });
  82.         });
  83.         function resetFields() {
  84.             $("input[type=text], input[type=password]").removeClass("required");
  85.         }
  86.     </script>
  87. </head>
  88. <body>
  89.  
  90.     <h1>JankoAtWarpSpeed demos</h1>
  91.     <p>Demo for <a href="http://www.jankoatwarpspeed.com/post/2009/09/16/Animate-validation-feedback-using-jQuery.aspx">Animate validation feedback using jQuery</a></p>
  92.     <h2><img src="header.png" alt="Account information" /></h2>
  93.     <ul>
  94.         <li class="first">
  95.             <h3>Your Name</h3>
  96.             <p>
  97.  
  98.                 <input type="text" value="First and Last name" id="name" name="name" /></p>
  99.         </li>
  100.         <li>
  101.             <h3>Email</h3>
  102.             <p>
  103.                 <input type="text" value="[email protected]" name="email"  /></p>
  104.         </li>
  105.         <li>
  106.  
  107.             <h3>Password</h3>
  108.             <p>
  109.                 <input type="password" name="passwd" /></p>
  110.         </li>
  111.         <li>
  112.             <h3>Password confirmation</h3>
  113.             <p>
  114.                 <input type="password" name="passwd_conf"  /></p>
  115.  
  116.         </li>
  117.         <li>
  118.             <h3>User name</h3>
  119.             <p>
  120.                 <input type="text" value="MyUserName" id="userName" name="user_name"  /></p>
  121.         </li>
  122.         <li class="last">
  123.             <a id="signup" href="#"><img src="button.png" alt="Fake signup button" style="vertical-align:middle;" /></a><img src="clickhere.png" alt="" style="vertical-align:middle;" />
  124.  
  125.         </li>
  126.     </ul>
  127. </body>
  128. </html>
  129.  

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.