AJAX - Javascript validation form

Hey everybody, nice to be here.

I know my topic subject doesn't sound interesting, but I really need your help on this. I've been struggling for a day now with AJAX and I can;t find what I am doing wrong.

I've tried it with variables working as flags, I've checked the <span id="availability_status"></span> for both the username and email fields...Everything seems to be working fine with the checking, but there is a combination of checking that i do in an order like this one after another:

1)E-mail: acceptable

2)Username: acceptable

3)then change username to get this error: you need more than 6 characters

4)then change email:not acceptable => and when i see email not accepatable I get username as acceptable although it is less than 6 characters...

it's like in the middle of the checking, the email ajax part changes also the username part...I am new to ajax, but is there a bug in firefox or something or am i using it wrong?

Here is my code:

<script type="text/javascript">

var check_username = 0;

var check_email = 0;

$(document).ready

(

function()

{

$("#username").change

(

function()

{

var username = $("#username").val();

var nameRegex = /^[A-Za-z][a-zA-Z0-9]+$/;

if((username.length > 5) && (username != ''))//if the length greater than 5 characters

{

//Add a loading image in the span id="availability_status"

$.ajax(

{  //Make the Ajax Request

type: "POST", 

url: "ajax_check.php",  //file name

data: "username="+ username,  //data

success: function(server_response)

{ 

$("#availability_status").ajaxComplete(

function(event, request)

{

if(server_response == '0')

{

//username = $("#username").val();

if(!username.match(nameRegex))

{

$("#availability_status").html('<img src="not_available.png" align="absmiddle"> <font color="red" size="2">Not acceptable format</font>');

}

else

{ $("#availability_status").html('<img src="available.png" align="absmiddle"> <font color="Green" size="2">Available</font>');

check_username = 1;

}

} 

else if(server_response == '1')

{ 

$("#availability_status").html('<img src="not_available.png" align="absmiddle"> <font color="red" size="2">ALready taken</font>');

}  } );} }); }

else

{

$("#availability_status").html('<font color="red" size="1">username must be more than 6 characters)</font>');

}

return false;});

$("#email").change

(

function()

{

var email = $("#email").val();

var emailRegex = /^[a-zA-Z]\w+(\.\w+)*\@\w+(\.[0-9a-zA-Z]+)*\.[a-zA-Z]{2,4}$/;

if((email != ''))

{

//Add a loading image in the span id="availability_status_email"

$.ajax(

{ 

type: "POST", 

url: "ajax_check_email.php", 

data: "email="+ email,

success: function(server_response)

{ 

$("#availability_status_email").ajaxComplete(

function(event, request)

{

if(server_response == '0')

{

if((!email.match(emailRegex)))

{

$("#availability_status_email").html('<img src="not_available.png" align="absmiddle"> <font color="red" size="2">Not acceptable format</font>');

}

else

{

$("#availability_status_email").html('<img src="available.png" align="absmiddle"> <font color="Green" size="2">Available</font>');

check_email = 1;

}

    } 

else if(server_response == '1')

{  $("#availability_status_email").html('<img src="not_available.png" align="absmiddle"> <font color="red" size="2">already taken</font>');}  } );}});}

return false;});});

and then with javascript i check username_check and email_check if they are equal to 1 (meaning both are correct)and i submit it...

Sorry I messed up with intentation and looks, I did it so that it takes less space while viewing it...Thanks in advance...

Should this not be in the ajax section?

Yeah it should...  d@mn it, I got so dizzy since this morning and I just resd what I needed to read: "Coding Help"...Please, some moderator, move this post to the AJAX help thread...Sorry...