web-dev-qa-db-fra.com

jQuery AJAX validation du formulaire

J'essaie de créer une page de connexion personnalisée pour mon site, à savoir http://localhost/site/login. Le problème que je rencontre actuellement est que lorsque l'utilisateur tente de se connecter et entre un nom d'utilisateur ou un mot de passe incorrect, il est redirigé vers la page wp-login.php, qui est problématique, comme vous pouvez l’imaginer, j’aimerais donc ajouter la validation de formulaire AJAX à mon formulaire personnalisé, mais le problème est que je ne suis pas sûr de la meilleure façon de procéder.

Comment valider un utilisateur utilisant jQuery AJAX?

Voici ce que j'ai jusqu'ici:

jQuery:

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

Je sais que ce n'est pas la bonne façon de s'y prendre, c'est juste pour vous donner une idée de ce que j'essaie de faire. Quel serait le meilleur moyen d'obtenir l'effet désiré?

Merci d'avance!

jqueryloginajax
3
Odyss3us

Si vous aimez coder manuellement la solution dans votre thème, essayez plutôt ceci au lieu d'utiliser un plugin.

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

Tout d’abord, la fonction empêche la soumission du formulaire de connexion original (connexion non ajax) et le remplace par une requête ajax.

Si le nom d'utilisateur et le mot de passe fournis correspondent, nous sommes supposés être redirigés vers une certaine "page de connexion". Sinon, nous sommes redirigés vers wp-admin/login.php

En cas de succès, la fonction vérifie si nous avons le div "# login-status" avec le contenu "success" sur la "page de connexion" ou pas. Si nous le faisons, tout ce que nous avons à faire est de rediriger l'emplacement actuel. Si nous ne le faisons pas, affichez simplement la notification d'erreur.

J'espère que cette aide.

1
ifdion

Le plugin de validation jquery devrait faire ce que vous voulez.

1
lkraav

Essayez d’utiliser un plugin de connexion AJAX. http://wordpress.org/extend/plugins/login-with-ajax/ Si vous n'aimez pas une fonctionnalité, tout le code est à portée de main. C'est la beauté de l'open source, vous pouvez prendre ce que quelqu'un a construit et le rendre encore meilleur et le rendre à la communauté. Ma position est que si cela existe déjà, pourquoi réinventer la roue? Utilisez ce qui est donné pour pousser votre projet plus loin, plus rapidement (en donnant un crédit aux auteurs originaux lorsque le crédit est dû évidemment).

0
Brian Fegter