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

我一直在做一个网站，我想要一个不错的登录/注册/忘记通行证表格

我想使用“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();
});


});

jQuery（文档）.ready（函数（$）{
$（'JTlogin'u titleText'）。文本（“注册或登录”）；
$（“输入[type='submit'][name='submit']”）.val（“发送”）；
$（“#JTlogin_wrapper#forgotpass_div”）.hide（）；
$（“#JTlogin_wrapper#matchPass_div”）.hide（）；
$（'form#loginFormID#username'）。更改（函数（）{
$（'form#loginFormID span.JTlogin_usernameStaticMessage'）.hide（）；
$（'form#loginFormID span.JTlogin_usernameErrorMessage'）.hide（）；
$（'form#loginFormID span.JTlogin_usernameDynamicMessage'）.show（）；
$（'form#loginFormID span.JTlogin_usernameDynamicMessage'）.html（“checking…”）；
$.ajax({
类型：“post”，
数据类型：“json”，
url:ajax\u login\u object.ThemeFolder+ajax\u login\u object.auxFunctionsFolder+“/check\u login\u details.php”，
数据：{
'username'：$（'form#loginFormID#username'）.val（），
成功：功能（数据）{
if（data.existing_user==true）{
$（'form#loginFormID span.JTlogin_usernameDynamicMessage'）.html（“欢迎回来-请登录”+data.userFirstName+”）；
$（'登录提交'）.removeAttr（“禁用”）；
$（“#JTlogin_wrapper#matchPass_div”）.hide（）；
}
否则{
如果（data.errorMsg）{
$（'form#loginFormID span.JTlogin_usernameDynamicMessage'）.hide（）；
$（'form#loginFormID span.JTlogin_usernameErrorMessage'）.show（）；
$（'form#loginFormID span.JTlogin_usernamererrormessage'）.html（“+data.errorMsg+”）；
$（“#JTlogin_wrapper#matchPass_div”）.hide（）；
$（'loginSubmit'）.attr（'disabled'，'disabled'）；
}否则{
$（'form#loginFormID span.JTlogin_usernameDynamicMessage'）.html（“欢迎-单击提交注册”）；
$（“input[type='submit'][name='submit']”）.val（“Register”）；
$（'JTlogin'u wrapper'matchPass'u div'）.fadeIn（'slow'）；
$（'登录提交'）.removeAttr（“禁用”）；
}
}
}
});
});
//在表单提交时执行AJAX传递
$（'form#forgotPassFormID'）。关于（'submit'，函数（e）{
$（'form#loginFormID#JTlogin_titleText'）.text（ajax_login_object.loadingmessage）；
$.ajax({
类型：“post”，
数据类型：“json”，
url:ajax\u login\u object.ThemeFolder+ajax\u login\u object.auxFunctionsFolder+“/check\u login\u details.php”，
数据：{
'username'：$（'form#loginFormID#username'）.val（），
“resetpass”：true}，
成功：功能（数据）{
//警报（“此处”）；
}
});
e、 预防默认值（）；
});
$（“#loginFormID#将#更改为(忘记)传递”）。单击（函数（）{
$（'JTlogin'u titleText'）.text（“忘记密码”）；
$（'#JTlogin_包装器#login_div'）.hide（）；
$（'JTlogin'u wrapper'forgotpass'u div'）.fadeIn（'slow'）；
});
$（“#放弃passformid#将#更改为#登录”）。单击（函数（）{
$（'JTlogin'u titleText'）。文本（“注册或登录”）；
$（“#JTlogin_wrapper#forgotpass_div”）.hide（）；
$（“#JTlogin_wrapper#login_div”）.fadeIn（'slow'）；
});
//在表单提交时执行AJAX登录
$（'form#loginFormID'）。关于（'submit'，函数（e）{
$（'#JTlogin_titleText'）.text（ajax_login_object.loadingmessage）；
$.ajax({
键入：“POST”，
数据类型：“json”，
url:ajax\u login\u object.ajaxurl，
数据：{
'action'：'ajaxlogin'，//调用wp\u ajax\u nopriv\u ajaxlogin
'username'：$（'form#loginFormID#username'）.val（），
'密码'：$（'form#loginFormID#password'）.val（），
'password2'：$（'form#loginFormID#password2'）.val（），
'security'：$（'form#loginFormID#security'）.val（），
成功：功能（数据）{
$（'#JTlogin_titleText'）.text（data.message）；
if（data.loggedin==true）{
document.location.href=ajax\u login\u object.redirecturl；
}
},
错误：函数（数据）{
警报（“抱歉，出现错误。请重试。”）；
}
});
e、 预防默认值（）；
});
});

我的表格上有这个问题

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

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

我只想在ajax查询返回true时执行它

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

我还觉得我的jquery东西越来越多，我觉得如果我对我正在做的事情有一个scooby doo，我可能可以用更少的代码行来做我正在尝试的事情！所以我们将非常感激您的任何帮助

干杯

---

约翰；-）

您需要返回false以取消提交活动。谢谢您的回答。最后，我将“onsubmit”改为“onclick”，并将其放在提交按钮标记中。这似乎又能正常工作了。但如果用户填写表单并从键盘上按“回车键”，onclick将不会被调用。您还必须管理它。

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

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