jQuery JSON validation for username before continuing with Facebook registration...

[wpearsall]

OK, heres the thing...

I am integrating facebook login into my website... Its all working, except i have yet to validate the fields on the registration form.

ie: all of the following work...
Facebook login,
facebook registration


the only problem being -> if the username is taken on my server, the registration errors...
However, facebook thinks that the user is registered still... so it wont direct to the register page, but instead login, I set the cookie for the user (or attempt to) but validation says its not a valid user so wont accept the login... and it can become a big circle... etc

so i found out about the async validation...

and it seems to work ok... except it says my json return is causing a parse error...

my PHP webcode:

function CheckUsername($reqname){
    global $facebook, $clsUser, $dbi, $user_prefix, $prefix;
        
    $result = sql_query("SELECT user_id, facebook, email_address, password FROM ".$user_prefix
                    ."user_account WHERE username='".addslashes($reqname)."'",$dbi);    
    
    if(sql_num_rows($result,$dbi)>0){
        $data = "Taken";
        
    } else {
        $data = "Free";
        
    }
    header("Content-Type: application/json");
              // tried it with and without the [ square brackets...
    echo "[{\n";
    echo "\"username\": ".json_encode($data)."\n";
    echo "}]";
    exit;
} 

which outputs (as a download file... due to the content headers)

{
"username": "Taken"
}

the json request is:

<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
function validate_async(form, cb) {
	
	console.log("We are in the validate_async box...");
	
	//if(form.username.length<3){
	//	console.log("the username length is less than 3 chars");
	//	cb("username: Username length must be longer than 3 chars.");
	
	//}else{	
	
			// TODO: check password is ok before proceeding...
			
			console.log("Fetching the username '"+form.username+"'");	
			
			$.getJSON('http://domain.com/member/fb_login.php?op=CheckUsername&username=' + form.username,
				function(response) {
					console.log( "first finish routine? ");		
				})
			.done(function(response) { 
				console.log( "second success ( .done() )" );
				
				console.log("We are checking the response...'"+response.username+"'");
				
				if (response.username == "Free") {
					// Username isn't taken, let the form submit
					//cb();
					
					console.log("error is true???");	
					
					//call back
					cb();
				}
				
				console.log("We are displaying username error...");
				cb({username: 'That username is taken, Sorry!'});
			
				 
			})
			.fail(function(response, textstatus, errorresult) { 
				console.log( "error ( .fail() ) response: " +response );
				console.log( "error ( .fail() ) textstatus: " +textstatus );
				console.log( "error ( .fail() ) errorresult: " +errorresult ); 
				cb({username: 'We failed to check the username...'});
				
			})
			.always(function(response) { 
				console.log( "complete ( .always() )" ); 
				
			});

	//}		
	console.log("exiting the validate_async");
}
</script> 

<div style="float:right;">
	<div class="fb-registration" data-fields='[
    				{"name":"name"},
                    {"name":"first_name"},
                    {"name":"last_name"},
                    {"name":"email"},
                    {"name":"location"},
                    {"name":"username","description":"Username for our website","type":"text"},
                    {"name":"password"},
                    {"name":"captcha"},
                    {"name":"newsletter","description":"Subscribe to our newsletter?","type":"checkbox"}
                    ]' 
        data-redirect-uri="<?php echo FB_SITEBASE; ?>/members/fb_login.php?op=do_register"
      width="300" onvalidate="validate_async">
    </div></div>

the webpage itself works... - ive tried it using browser, and tested the output on a validator which says its ok...

but, the output on my console is:

LOG: We are in the validate_async box...
LOG: Fetching the username 'eee'
LOG: exiting the validate_async
LOG: error ( .fail() ) response: [object Object]
LOG: error ( .fail() ) textstatus: parsererror
LOG: error ( .fail() ) errorresult: [object Error]
LOG: complete ( .always() )
LOG: We are in the validate_async box...
LOG: Fetching the username 'eee'
LOG: exiting the validate_async
LOG: error ( .fail() ) response: [object Object]
LOG: error ( .fail() ) textstatus: parsererror
LOG: error ( .fail() ) errorresult: [object Error]
LOG: complete ( .always() )

anyone got any ideas?