在使用ajax提交之前，先使用javascript验证表单? [英] Validate a form with javascript before submitting with ajax?
问题描述
我一直在做一个网站，我想要一个不错的登录/注册/忘记通行证表格.
I've been making a website and I want a nice login/registration/forgot pass form.
我想使用'ajax'使其对用户友好，因此，过去2周的学习曲线非常陡峭.
I wanted to use 'ajax' to make it nice for the user and, consequently, have spent the last 2 weeks on a steep learning curve.
我想检查我的表格是否有效，所以我使用了一些JavaScript并通过onsubmit函数执行了它.但是，我的ajax只是提交，所以现在我想知道是否可以通过jquery脚本进行验证?
I wanted to check my form is valid so I used some javascript and executed it via the onsubmit function. However, my ajax just submits regardless so now I'm wondering if I would be better validating via the jquery script?
到目前为止，这是我的代码:
Here is my code so far:
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....
My form has this onsubmit....
<form id="loginFormID" onsubmit="return validateLoginFormOnSubmit(this)" action="login" method="post" autocomplete="on">
然后我有一些JavaScript来检查表单是否正确填充，如果正确，则返回true，否则，则返回false.
I then have some javascript that checks the form is populated correctly and returns true if it is and returns false if it isn't.
我只想在返回true时执行我的ajax查询.
I only want to execute my ajax query if it returns true.
所以...我的问题是: 1)你知道我会怎么做吗? 2)有更好的方法吗?
So... my questions are: 1) Do you know how I would do this? 2) Is there a better way of doing this?
我还感觉到我的jquery东西在不断增长，并且感觉如果我对自己正在做的事情有个偶然的发现，我可能可以用更少的代码行来完成我正在尝试的事情！因此，我们将非常感谢您的帮助.
I also feel like my jquery stuff is growing arms and legs and feel that I could probably do what I'm attempting with a lot fewer lines of code if I had a scooby-doo about what I'm doing! So.. any help would be very gratefully received.
欢呼
John;-)
推荐答案
<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验证表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
