I have a strange problem with the validation I am writing on a form. It is a 'Check Username' button next to an input. The input default value is the username for example 'betamax'. When I press 'Check Username' it passes the regex and sends the username to the server. The server behaves as expected and returns '2' to tell the javascript that they are submitting their own username.
Then, when I click the button again, the regex fails. Nothing is sent to the server obviously because the regex has failed. If I press the button again, the regex passes and then the username is sent to the server.
I literally cannot figure out what would be making it do this! It makes no sense to me!
This is my code:
$j("#username-search").click(checkUserName);
function checkUserName() {
var userName = $j("#username").val();
var invalidUserMsg = 'Invalid username (a-zA-Z0-9 _ - and not - or _ at beginning or end of string)';
var filter = /^[^-_]([a-z0-9-_]{4,20})[^-_]$/gi;
if (filter.test(userName)) {
console.log("Pass")
$j.post(
"/account/profile/username_check/",
{ q: userName },
function(data){
if(data == 0) {
$j("#username-search-results").html("Error searching for username. Try again?");
}
else if(data == 5) {
$j("#username-search-results").html(invalidUserMsg);
}
else if(data == 4) {
$j("#username-search-results").html("Username too short or too long.");
}
else if(data == 2) {
$j("#username-search-results").html("This is already your username.");
}
else if(data == 3) {
$j("#username-search-results").html("This username is taken.");
}
else if(data == 1){
$j("#username-search-results").html("This username is available!");
}
});
} else {
console.log("fail")
$j("#username-search-results").html(invalidUserMsg);
}
return false;
}
The HTML:
<input name="username" id="username" value="{{ user.username }}" />
<input type="button" value="Is it taken?" id="username-search">
<span id="username-search-results"></span>
