jQuery AJAX form validation

Question

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!

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

lkraav · Accepted Answer · 2012-01-03 16:00:09Z

1

jquery Validation plugin should do what you want.

answered Jan 3, 2012 at 16:00

lkraav

7519 silver badges22 bronze badges

How do you get the validation plugin installed?

crthompson
– crthompson

2015-05-27 20:56:02 +00:00
Commented May 27, 2015 at 20:56

Add a comment |

ifdion · Accepted Answer · 2012-02-15 10:35:52Z

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.

Brian Fegter · Accepted Answer · 2011-09-26 12:57:16Z

0

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

answered Sep 26, 2011 at 12:57

Brian Fegter

10k1 gold badge42 silver badges60 bronze badges

Add a comment |

Stack Exchange Network

jQuery AJAX form validation

3 Answers 3

Your Answer

Hot Network Questions

jQuery AJAX form validation

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions