0

私はウェブサイトを作っていて、素敵なログイン/登録/パス忘れフォームが欲しい.

私は「ajax」を使用してユーザーにとって使いやすいものにしたかったので、過去 2 週間は急な学習曲線に費やしました。

フォームが有効であることを確認したかったので、javascript を使用し、onsubmit 関数を介して実行しました。ただし、私のajaxは関係なく送信するだけなので、jqueryスクリプトを介して検証する方がよいかどうか疑問に思っていますか?

これまでの私のコードは次のとおりです。

jQuery(document).ready(function($) {

$('#JTlogin_titleText').text("Register or log in");
$("input[type='submit'][name='submit']").val("Send");
$('#JTlogin_wrapper #forgotpass_div').hide();
$('#JTlogin_wrapper #matchPass_div').hide();


$('form#loginFormID #username').change(function(){
$('form#loginFormID span.JTlogin_usernameStaticMessage').hide();
$('form#loginFormID span.JTlogin_usernameErrorMessage').hide();
$('form#loginFormID span.JTlogin_usernameDynamicMessage').show();

$('form#loginFormID span.JTlogin_usernameDynamicMessage').html("<div class='login_message_box'><img src='"+ajax_login_object.ThemeFolder+"/images/loginbox/loading20x20.gif' class='JTloginFormImage'> checking...</div>");


          $.ajax({
                type:"post",
                dataType: 'json',
                url:ajax_login_object.ThemeFolder+ajax_login_object.auxFunctionsFolder+"/check_login_details.php",
                data: { 
                    'username': $('form#loginFormID #username').val() },                   
                    success:function(data){
                    if(data.existing_user == true){
                        $('form#loginFormID span.JTlogin_usernameDynamicMessage').html("<div class='login_message_box'><img src='"+ajax_login_object.ThemeFolder+"/images/loginbox/tick.png' class='JTloginFormImage'> Welcome back - please log in "+data.userFirstName+"</div>");
                        $('#loginSubmit').removeAttr("disabled");
                        $('#JTlogin_wrapper #matchPass_div').hide();
                    }
                    else{
                        if( data.errorMsg ) {
                            $('form#loginFormID span.JTlogin_usernameDynamicMessage').hide();
                            $('form#loginFormID span.JTlogin_usernameErrorMessage').show();
                            $('form#loginFormID span.JTlogin_usernameErrorMessage').html("<div class='login_message_box'><img src='"+ajax_login_object.ThemeFolder+"/images/loginbox/cross.png' class='JTloginFormImage'> "+data.errorMsg+"</div>");  
                            $('#JTlogin_wrapper #matchPass_div').hide();                            
                            $('#loginSubmit').attr('disabled', 'disabled');
                        } else {
                        $('form#loginFormID span.JTlogin_usernameDynamicMessage').html("<div class='login_message_box'><img src='"+ajax_login_object.ThemeFolder+"/images/loginbox/tick.png' class='JTloginFormImage'> Welcome - click submit to register</div>");
                        $("input[type='submit'][name='submit']").val("Register");
                        $('#JTlogin_wrapper #matchPass_div').fadeIn('slow');
                        $('#loginSubmit').removeAttr("disabled");
                      }
                    }
                }
             });
        });




// Perform AJAX forgot pass on form submit
$('form#forgotPassFormID').on('submit', function(e){
    $('form#loginFormID #JTlogin_titleText').text(ajax_login_object.loadingmessage);
    $.ajax({
                type:"post",
                dataType: 'json',
                url:ajax_login_object.ThemeFolder+ajax_login_object.auxFunctionsFolder+"/check_login_details.php",
                data: { 
                    'username': $('form#loginFormID #username').val(),
                    'resetpass': true },                   
                    success:function(data){
                        //alert('here');
                    }
    });
    e.preventDefault();
});


$('#loginFormID #change_to_forgot_pass').click(function(){
$('#JTlogin_titleText').text("Forgotten your password");
$('#JTlogin_wrapper #login_div').hide();
$('#JTlogin_wrapper #forgotpass_div').fadeIn('slow');
});

$('#forgotPassFormID #change_to_login').click(function(){
$('#JTlogin_titleText').text("Register or log in");
$('#JTlogin_wrapper #forgotpass_div').hide();
$('#JTlogin_wrapper #login_div').fadeIn('slow');
});




// Perform AJAX login on form submit
$('form#loginFormID').on('submit', function(e){
    $('#JTlogin_titleText').text(ajax_login_object.loadingmessage);

        $.ajax({
        type: 'POST',
        dataType: 'json',
        url: ajax_login_object.ajaxurl,
        data: { 
            'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin
            'username': $('form#loginFormID #username').val(), 
            'password': $('form#loginFormID #password').val(), 
            'password2': $('form#loginFormID #password2').val(),                
            'security': $('form#loginFormID #security').val() },
        success: function(data){
            $('#JTlogin_titleText').text(data.message);
            if (data.loggedin == true){
                document.location.href = ajax_login_object.redirecturl;
            }
        },
        error: function(data){ 
                alert("Apologies, there has been an error. Please try again."); 
        }
    });

    e.preventDefault();
});


});

私のフォームにはこのonsubmitがあります....

<form id="loginFormID" onsubmit="return validateLoginFormOnSubmit(this)" action="login" method="post" autocomplete="on">

次に、フォームが正しく入力されていることを確認し、そうでない場合は true を返し、そうでない場合は false を返す JavaScript をいくつか用意します。

true が返された場合にのみ ajax クエリを実行したい。

だから...私の質問は次のとおりです。1）これをどのように行うか知っていますか？2) これを行うためのより良い方法はありますか?

また、自分の jquery が腕と脚を成長させているように感じており、自分がやっていることについてスクービードゥーがあれば、おそらくもっと少ないコード行で試みていることを実行できると感じています! だから..どんな助けでも非常に感謝しています。

乾杯

ジョン;-)

4

1 に答える 1

1 
<form id="loginFormID" onsubmit="return validateLoginFormOnSubmit();" method="post" autocomplete="on">

JavaScript

funciton validateLoginFormOnSubmit() {

        //do client side validation 

        if(true == validation) {
             //do the `ajax` call with serialized form data
        }
        else {
            //show error 
        }

        return false; // because we want to submit only through `ajax`, so stopping original form submit.
}
于 2013-04-20T11:31:58.567 に答える