web-dev-qa-db-ja.com

jQuery AJAX フォーム検証

私は自分のサイト用のカスタムログインページ、つまりhttp://localhost/site/loginを作成しようとしています。今問題になっているのは、ユーザーがログインしようとして間違ったユーザー名またはパスワードを入力すると、wp-login.phpページにリダイレクトされることです。あなたが想像できるように問題が多いので、私は私のカスタムフォームにAJAXフォーム検証を追加したいのですが、問題は私がこれを最善の方法で進める方法がわからないということです。

JQuery AJAXを使用してユーザーを検証する方法を教えてください。

これは私がこれまでに持っているものです：

jQuery：

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

これが正しいやり方ではないことを私は知っています、それは私に何をしようとしているのかのアイデアを皆さんに与えるためだけのものです。望ましい効果を得るための最善の方法は何でしょうか。

前もって感謝します！

jqueryloginajax
3
Odyss3us

プラグインを使用するのではなく、テーマにソリューションを手作業でコーディングしたい場合は、これを試してください。

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

まず、この関数はオリジナルのログインフォームの送信（非ajaxログイン）を防ぎ、それをajaxリクエストに置き換えます。

提供されたユーザー名とパスワードが一致した場合は、特定の「ログインページ」にリダイレクトされます。そうでない場合は、wp-admin/login.phpにリダイレクトされます。

成功すると、この関数は「ログインページ」に「success」という内容の「＃login-status」divがあるかどうかをチェックします。そうした場合、現在の場所をリダイレクトするだけです。そうでない場合は、エラー通知を表示するだけです。

この助けを願っています。

1
ifdion

jquery検証プラグイン あなたが望むことをするべきです。

1
lkraav

AJAXログインプラグインを使用してみてください。 http://wordpress.org/extend/plugins/login-with-ajax/ あなたが機能を好まないのであれば、すべてのコードはあなたの指先にあります。それがオープンソースの美しさです、あなたは誰かが作ったものを取り、それをさらに良くしてコミュニティにそれを返すことができます。私の見解は、それがすでにそこにあるのなら、なぜ車輪を再発明するのかということです。プロジェクトをさらに早く推進するために、与えられたものを使用してください（明らかに期日が到来しているところにオリジナルの作者にクレジットを付与します）。

0
Brian Fegter