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:


$('#selector').live('click', function(){
    $.post('http://localhost/site/wp-login.php', { action: 'login' }, function(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!

  • Close-voted as off-topic. This is an HTML/AJAX/form-validation question, not a WordPress question. Jun 4, 2012 at 14:02

3 Answers 3


jquery Validation plugin should do what you want.

  • How do you get the validation plugin installed?
    – crthompson
    May 27, 2015 at 20:56

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){
    var inputData = $('#signin-form form').serialize();
    var loginUrl = $('#signin-form form').attr('action');
    var homeUrl = $('#signin-form input[name="redirect_to"]').attr('value');
        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.


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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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