WordPress Login in jQuery Popup - How to validate login with jQuery Ajax?

Question

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.

If you goto http://westendmediacentre.com/dev and click login, you can see that I have the form appearing within a jQuery popup. My code for this is as follows:

Form Code:

<div class="login-form">
      <form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
        <input type="text" name="log" id="log" value="Username<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" class="login-fields" onclick="this.value='';" onblur="this.value=!this.value?'Username':this.value;"/>
        <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;"/>
        <input type="submit" name="submit" value="Login" class="login-button" />
        <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
      </form>
</div>

jQuery:

$('.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'});
});

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.

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.

I tried following this tutorial, however it didn't work right with my existing code: http://www.tutorialstag.com/custom-wordpress-login-without-using-a-plugin.html

Would appreciate if someone could post a working solution

Answer 1

This is all about wordperess' structure, first of all you should know that even if you supply correct or wrong login credentials your structure redirects user to wp-login.php (because of)
< ?php echo get_option('home'); ?>/wp-login.php line (i mean you are just posting your username and password to wp-login.php)
And then if supplied information are correct then wordpress again redirects to user to homepage immediately, otherwise shows an error (with shake effect), you can find all these actions in wp-login.php file.
There are two different options that you can use.

• You can hack wp-login.php file like
  if a user didnt supply correct username/password then let him redirect back to http://www.westendmediacentre.com/dev/
• You can construct your own login mechanism with Ajax validating (i mean you prepare a php file for database connection and retrieving username and password from database and send back results to your Login System)

If you select second way, you can control this post. That is very useful.