jQuery: .post() timeout?

[GSimpson]

Hey there.

I've recently adapted to the jQuery library to start making my websites more dynamic, and so far it's gone really well, and I've even started validating forms using jQuery, but I can't seem to get my head around the server side functions in relation to the jQuery ajax functions.

Alright so my problem is that I have a form, and on submission it validates all of the fields using client side methods such as javascript's length() object. I'm using the basic "if, if else, else" methods to work through the list of things to validate and that seems to work well.

if(string isn't at least 5 characters in length, then alert("error #1") and return false)

That's pretty much how most of them are, except the following are "else if". And then the final one, if none of them return false, it'll return true which will send them to the database insertion page. The only thing is that I want to do some checking of the database before I allow it to return true. So I've been using the following function to submit the email to see if it already exists, and it checks it fine. But if there are no other problems within the form, it seems to send them to the database insertion page before it gets the chance to validate the emails existence and return an error (if that's the case).


<script type="text/javascript">

$("form").submit(function(){

$.post("resources/scripts/validateDisplayName.php",{ displayName:$("#display-name").attr("value") } ,function(data)
{ if(data=='false') { alert("Display Name Taken. Sorry Buddy."); return false; } });

$.post("resources/scripts/validateEmail.php",{ email:$("#email").attr("value") } ,function(data)
{ if(data=='false') { alert("Email Taken. Sorry Buddy."); return false; } });

if($("#email").attr("value").length<"5") { alert("Your email address must be at least 5 characters long."); return false; }
else if($("#email").attr("value").indexOf("@")<"1") { alert("Your email address is invalid."); return false; }
else if($("#email").attr("value").indexOf(".")<"2") { alert("Your email address is invalid."); return false; }
else if($("#email").attr("value")!=$("#confirm-email").attr("value")) { alert("Your email addresses did not match."); return false; }

else if($("#password").attr("value").length<"6") { alert("Your password must be at least 6 characters long."); return false; }
else if($("#password").attr("value")!=$("#confirm-password").attr("value")) { alert("Your passwords did not match."); return false; }

else if($("#display-name").attr("value").length<"4") { alert("Your display name must be at least 4 characters long."); return false; }
else if($("#code").attr("value")!="4") { alert("Are you sure dogs have that many legs?"); return false; }


else {

return true;

}
});
</script>


Since the PHP validation pages are almost identical, I'll just post one of them.

<?php


$mysql["connection"] = mysql_connect("localhost","root","");

if(!$mysql["connection"]) { die("false"); }

mysql_select_db("smurfworks_net",$mysql["connection"]);

$query = mysql_query("SELECT * FROM `accounts` WHERE email='$_POST[email]'");

if(mysql_num_rows($query)=="0") { die("true"); } else { die("false"); }

?>


If anyone has a solution to make sure the php files return true of false, before the submission goes through the list of ifs and elses, it'd be much appreciated. I have a feeling I could be structuring this wrong all together, but that's something I need to learn.

Thanks in advance!

[A1ien51]

The post methods are asynchronous, you are treating them as synchronous.

Eric

[GSimpson]

Hey there, Thanks for your reply. I did a bit of research on the topic, and found a lot of similar tasks are approached with this method:


email = $("#email").serialize();

$.ajax({
type: "POST",
url: "signUp/validateEmail.php",
data: email,
async: true,
success: function(data) {
if(data == "false"){
alert("Email address already in use. Try logging in?"); return false;
}
}

});


So I tried that in place of the $.post() methods, and it alerts when it gets caught on one of the if errors. But still proceeds to load the next page if none of the if errors catch it. Any ideas on what I'm doing wrong?

[GSimpson]

Alright so I now have the code all finished up with .ajax() api, it validates from the database correctly, but still submits if none of the if/else if lines return false - regardless if I use async: true or async:false. Sorry to ask the same questions twice, i'd just like to move forward with the project - is there anything I'm overlooking. I thought I might be able to put the .ajax({}) codes in to a their own if() clauses so that it has to return the ajax answer before returning true in the else { } clause.

But I'm not so sure that would work though - would it wait for the return, or is there preferred method of doing this.

[hgs]

Why don't you just send all the data to the insertion script and
have this script doing the business logic to check for existing display name and
existing email. I think that this type of logic does not belong to the client.

Just analyze the responds from the insertion script like
in the very simple example below.

0=all is fine
1=display name exist
2=email exists
3=display and email exists

Regards

[GSimpson]

Hey thanks for you advice. I got a great idea the other day to either do all the validation through php and return errors to the calling page, so that way it has nothing to skip ahead to, and the validation will be secure within the php file too.

The other idea, which I've just been thinking about, is that I could still do the client side validation then before doing the mysql insert, checking the names against it so it's the same process, but the basic php validations I've got now would be instant on the clients end. But I think I've got it down now - I knew I was probably structuring it wrong in the first place, so I just needed to sit down and work out valid process for this whole thing.

Thanks for your help guys. And if you're interested, my sandbox website has an example of the validation in use: http://www.smurfworks.net/