在使用ajax提交之前使用javascriptvalidation表单？

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

我想使用’ajax’让用户感觉很好，因此，在过去的两周里，我们已经在陡峭的学习曲线上度过。

我想检查我的表单是否有效所以我使用了一些javascript并通过onsubmit函数执行它。 但是，我的ajax只是提交，所以现在我想知道我是否会通过jquery脚本更好地validation？

这是我到目前为止的代码：

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("
 checking...
"); $.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("
 Welcome back - please log in "+data.userFirstName+"
"); $('#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("
 "+data.errorMsg+"
"); $('#JTlogin_wrapper #matchPass_div').hide(); $('#loginSubmit').attr('disabled', 'disabled'); } else { $('form#loginFormID span.JTlogin_usernameDynamicMessage').html("
 Welcome - click submit to register
"); $("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(); }); }); 

我的表格有这个提交….

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

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

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

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

干杯

约翰 ;-）

Answer 1

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