Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am trying to create a custom login page for my site, namely http://localhost/site/login, the problem I am running into now is that when the user tries to log in and enters the wrong username or password, they are redirected to the wp-login.php page, which is problematic, as you can imagine, so I would like to add AJAX form validation to my custom form, but the problem is that I am unsure of how to go about this the best way.

How can I validate a user using jQuery AJAX?

This is what I have thus far:

jQuery:

$('#selector').live('click', function(){
    $.post('http://localhost/site/wp-login.php', { action: 'login' }, function(data){
        console.log(data);
    });
});

I do know that this is not the proper way of going about it, it is just to give you guys an idea of what I am trying to do. What would be the best way to achieve the desired effect?

Thanks in advance!

share|improve this question
    
Close-voted as off-topic. This is an HTML/AJAX/form-validation question, not a WordPress question. –  Chip Bennett Jun 4 '12 at 14:02

3 Answers 3

jquery Validation plugin should do what you want.

share|improve this answer

If you like to hand code the solution in your theme, instead of using a plugin, you should try this.

$('#signin-form input[type="image"]').click(function(q){
    q.preventDefault();
    var inputData = $('#signin-form form').serialize();
    var loginUrl = $('#signin-form form').attr('action');
    var homeUrl = $('#signin-form input[name="redirect_to"]').attr('value');
    $.ajax({
        type: "POST",
        url:  loginUrl,
        data: inputData,
        success: function(msg){
            testData = $('#login-status',msg).html();
            if(testData == 'success'){
                window.location = homeUrl;
            } else {
                $('#signin-form .error').show(); // show error notification here
            }
        }
    });
});

First the function prevent the original login form submission (non ajax login) and replace it with an ajax request.

If the provided username and password match, then we are supposed be redirected to a certain 'logged-in page'. Else, we are redirected to the wp-admin/login.php

On success, the function check whether we have the "#login-status" div with the content "success" on the 'logged-in page' or not. If we do, all we have to do is redirect current location. If we don't, just show the error notification.

Hope this help.

share|improve this answer

Try using an AJAX login plugin. http://wordpress.org/extend/plugins/login-with-ajax/ If you don't like a feature, all of the code is at your fingertips. That's the beauty of open source, you can take what someone has built and make it even better and give it back to the community. My position is that if it's already out there, why reinvent the wheel? Use what is given to propel your project further, faster (giving original authors credit where credit is due obviously).

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.