在用ajax提交之前用javascript驗證表單？

Question

我一直在做一個網站，我想要一個很好的登錄/註冊/忘記通行證表單。

我想用'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"> 

然後我有一些JavaScript來檢查的形式填充正確，如果返回true如果不是，則返回false。

我只想執行我的ajax查詢，如果它返回true。

所以......我的問題是： 1）你知道我該怎麼做嗎？ 2）有沒有更好的方法來做到這一點？

我也覺得我的jquery的東西是越來越多的胳膊和腿，我覺得如果我有一個關於我在做什麼的史酷比，我可以做很少的代碼行我嘗試了！所以..任何幫助將非常感激地收到。

乾杯

約翰;-)

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