title: jquery: shake div horizontally if input empty on submit?
body: <p>I am trying to use jquery to validate my form, if the user leaves either input box blank it will display a red border. Now I am trying to add a horizontal shake effect to the outer div 'home_column'.</p>
  
  <p>However this is not working, the red borders around the input boxes are still displayed but there is no shake effect. please can someone show me where I am going wrong, thanks in advance</p>
  
  <p>html</p>
  
  <pre><code>&lt;div class="home_column"&gt;
  &lt;div class="login_form"&gt;
  &lt;form name="login" id="login" action="include/validate_login.php" method="post" onsubmit="return validateForm()"&gt; 
  &lt;h21&gt;Username&lt;/h21&gt;&lt;br/&gt;
  &lt;input type="text" class="login_form_front" id="myusername" name="myusername"&gt;&lt;br/&gt;
  &lt;h21&gt;Password&lt;/h21&gt;&lt;br/&gt;
  &lt;input type="password" class="login_form_front" autocomplete="off"  id="mypassword" name="mypassword"&gt;
  &lt;br/&gt;
  &lt;input type="submit" class="buttons_login" value="Login" id="login" name="login"&gt;
  &lt;/form&gt; 
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jquery</p>
  
  <pre><code>&lt;script&gt;
      function validateForm() {
       var a = document.forms["login"]["myusername"].value;
       var b = document.forms["login"]["mypassword"].value;
       if (a == null || a == "" || b == null || b == "") {
       if (a == null || a == "") { document.forms["login"]["myusername"].style.border = "2px solid #963634";}
       if (b == null || b == "") { document.forms["login"]["mypassword"].style.border = "2px solid #963634";}
  
       $( ".home_column" ).effect( "shake" );
  
      return false;   
  
       }
   }
  
   &lt;/script&gt;
  </code></pre>