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!
jquery Validation plugin should do what you want.
If you like to hand code the solution in your theme, instead of using a plugin, you should try this.
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).