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. }
Comments
Post a Comment