JQuery .ajax() on username validation - php

Question

I was trying to validate username whether exist or not with the following code. But it somehow don't work to prevent the existing username.
**NOTE: checkusr2.php is a simple php to check wheter the username in database.
function verifyUser() {
var usr = $("#username").val();
$.ajax( {
type: "POST",
url: "checkusr2.php",
data: "username="+ usr,
success: function(msg) {
$("#txtHint").ajaxComplete(function(event, request, settings){
FormErrors = false;
if(msg == 'OK') {
FormErrors = true;
$('#formElem').data('username',FormErrors);
} else {
$('#formElem').data('username',FormErrors);
}
});
}
});
}
/** calling the function to check. **/
verifyUser();
if($('#formElem').data('username')){
alert('Username exist, please try another username.');
return false;
}

Answer 1

Use an http proxy like Charles, Fiddler, WireShark, etc... to view the ajax request you are sending and verify that the response is what you expect.
For one thing, you are making an asynchronous call (the A in Ajax) to get the response for whether the username exists. The check, immediately after the verifyUser call is being called as soon as you call the verifyUser and the the request to checkusr2.php may or may not have actually returned by then.
I have also never seen the ajaxComplete set inside of the success handler. I think you may want to change it like this:
function verifyUser() {
var usr = $("#username").val();
$.ajax( {
type: "POST",
url: "checkusr2.php",
data: "username="+ usr,
success: function(msg) {
if(msg != 'OK') {
alert('Username exists, please try another username.');
$("#username").val("");
}
};
});
}

Answer 2

Your problem is in trying to use verifyUser synchronously. The code seems fairly sound, the problem is that $.ajax executes asynchronously using XMLHTTPRequest. This means that your code immediately following the call to verifyUser cannot depend on the side effect of its completion.
What you need to do is run the verifyUser callback earlier (like, say, when the user un-focuses the username field), so that when it comes time to submit you've already got the result.
For example:
$('#username').blur(function() { verifyUser() });
A further change would be instead of preventing submit, you can make verifyUser show a div with a message next to the field when the username is invalid. You'd make these changes to your handler:
if(msg == 'OK') {
FormErrors = true;
$('#username_invalid').show();
} else {
$('#username_invalid').hide();
}
Then you could show the user the username cannot be chosen immediately, without wasting their time submitting it.

Answer 3

Try this
$("#txtHint").ajaxComplete(function(e, xhr, settings) {
if (settings.url == 'ajax/test.html' && xhr.responseHTML=="Ok") {
FormErrors = true;
$('#formElem').data('username',FormErrors);
} else {
$('#formElem').data('username',FormErrors);
}
})

Answer 4

Thanks for bringing up this .ajaxComplete() that I didn't know about. I think it will be of great help for me in the future.
But anyway I don't think it's what you want to use in this specific case:
function verifyUser() {
var usr = $("#username").val();
$.ajax( {
type: "POST",
url: "checkusr2.php",
data: {'username':usr},
success: function(msg) {
if ( msg != 'OK' ) {
alert('Username exist, please try another username.');
return false;
}
});
});
}
The function that you want to execute after the Ajax call must be passed as a callback of the Ajax function, otherwise, and even if you put it after your Ajax function, it will execute before the server's response.