title: WordPress Login in jQuery Popup - How to validate login with jQuery Ajax?
body: <p>I have the WordPress Login form working in the front-end of my website, to allow my users to login without having to visit the wp-login.php or leave the "theme" or the website.</p>
  
  <p>If you goto <a href="http://westendmediacentre.com/dev">http://westendmediacentre.com/dev</a> and click login, you can see that I have the form appearing within a jQuery popup.  My code for this is as follows:</p>
  
  <p>Form Code:</p>
  
  <pre><code>&lt;div class="login-form"&gt;
        &lt;form action="&lt;?php echo get_option('home'); ?&gt;/wp-login.php" method="post"&gt;
          &lt;input type="text" name="log" id="log" value="Username&lt;?php echo wp_specialchars(stripslashes($user_login), 1) ?&gt;" size="20" class="login-fields" onclick="this.value='';" onblur="this.value=!this.value?'Username':this.value;"/&gt;
          &lt;input type="password" name="pwd" id="pwd" value="Password" size="20" class="login-fields" onclick="this.value='';" onblur="this.value=!this.value?'Password':this.value;"/&gt;
          &lt;input type="submit" name="submit" value="Login" class="login-button" /&gt;
          &lt;input type="hidden" name="redirect_to" value="&lt;?php echo $_SERVER['REQUEST_URI']; ?&gt;" /&gt;
        &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('.button-login').click(function() {
      $('.login-box').fadeIn('slow', function() {
      // Animation complete
      });
      $(".login-box").css({'z-index' : '10000'});
      $("#the-lights").css({'display' : 'block'});
      $("#the-lights").css({'z-index' : '1'});
      $("#the-lights").fadeTo("slow",0.7);
  });
  $('.login-box-close').click(function() {
      $('.login-box').fadeOut('fast', function() {
      // Animation complete
      });
      $("#the-lights").fadeTo("slow",0);
      $("#the-lights").css({'display' : 'none'});
  });
  </code></pre>
  
  <p>This works perfectly, however, if you try logging in with some bad credentials, you get re-directed to a WordPress page giving you the error.</p>
  
  <p>What I would like to do, is have these errors appear within my jQuery popup, so that when you try to login with bad credentials, it gives an error message above or under the form, rather than re-directing to another page with the error shown there.</p>
  
  <p>I tried following this tutorial, however it didn't work right with my existing code: <a href="http://www.tutorialstag.com/custom-wordpress-login-without-using-a-plugin.html">http://www.tutorialstag.com/custom-wordpress-login-without-using-a-plugin.html</a></p>
  
  <p>Would appreciate if someone could post a working solution</p>