Подтвердить форму с помощью javascript перед отправкой с помощью ajax?

Question

Я делаю сайт, и мне нужна хорошая форма регистрации/регистрации/забытого прохода.

Я хотел использовать «ajax», чтобы сделать его приятным для пользователя и, следовательно, потратил последние 2 недели на крутую кривую обучения.

Я хотел проверить свою форму, поэтому я использовал javascript и выполнил его с помощью функции onsubmit. Тем не менее, мой аякс просто подчиняется независимо от того, теперь я задаюсь вопросом, буду ли я лучше проверять скрипт 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, который проверяет форму правильно заполняется и возвращает истину, если он есть и возвращает false, если это не так.

Я только хочу выполнить мой запрос ajax, если он возвращает true.

Итак ... мои вопросы: 1) Знаете ли вы, как я это сделал бы? 2) Есть ли лучший способ сделать это?

Я также чувствую, что мои вещи jquery растут в руках и ногах, и я чувствую, что я, вероятно, мог бы сделать то, что я пытаюсь, с гораздо меньшим количеством строк кода, если бы у меня был scooby-doo о том, что я делаю! Поэтому любая помощь будет очень благодарна.

Приветствия

John ;-)

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