Question

我一直在创建一个网站，我想要一个很好的登录/注册/忘记通行证表格。

我想使用'ajax'让用户感觉很好，因此，过去两周都花了很多学习曲线。

我想检查我的表单是否有效所以我使用了一些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();
});


});

我的表格上有这个提交....

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

然后我有一些javascript检查表单是否正确填充，如果是，则返回true，如果不是则返回false。

如果它返回true，我只想执行我的ajax查询。

所以...我的问题是： 1）你知道我会怎么做吗？ 2）有更好的方法吗？

我也觉得我的jquery东西正在增长胳膊和腿，并且如果我对我正在做的事情有一个scooby-doo，我觉得我可能会用更少的代码行做我正在尝试的东西！所以..非常感谢任何帮助。

干杯

约翰; - ）

Answer 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.
}

在使用ajax提交之前使用javascript验证表单？

1 个答案: