jquery - Validate a form with javascript before submitting with ajax? -

i've been making website , want nice login/registration/forgot pass form.

i wanted use 'ajax' make nice user and, consequently, have spent last 2 weeks on steep learning curve.

i wanted check form valid used javascript , executed via onsubmit function. however, ajax submits regardless i'm wondering if better validating via jquery script?

here code 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 - 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 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 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 error. please try again.");          }     });      e.preventdefault(); });   }); 

my form has onsubmit....

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

i have javascript checks form populated correctly , returns true if , returns false if isn't.

i want execute ajax query if returns true.

so... questions are: 1) know how this? 2) there better way of doing this?

i feel jquery stuff growing arms , legs , feel i'm attempting lot fewer lines of code if had scooby-doo i'm doing! so.. gratefully received.

cheers

john ;-)

<form id="loginformid" onsubmit="return validateloginformonsubmit();" method="post" autocomplete="on"> 

javascript

funciton validateloginformonsubmit() {          //do client side validation           if(true == validation) {              //do `ajax` call serialized form data         }         else {             //show error          }          return false; // because want submit through `ajax`, stopping original form submit. }