jQuery: check username availability

Question

I am using jQuery to check username availability when registering on my web application. For some reason, rather then to keep user data in database, I store the registered users's ID and password in a flat file accounts.txt. The format is like this:

joe:frt25t5546g
john:sdfsdgg

Update

Thanks to the help of guys here, I finally got a clue on it, I followed the method on http://roshanbh.com.np/2008/04/check-username-available-ajax-php-jquery.html.

Here is part of my registration.html

$(document).ready(function()
{
  $("#uname").blur(function(){
  $.post("usernameCheck.php",{user_name:$(this).val()},function(data)
  {
  if(data=="no"){
  $(this).html("This username already exists");
  }
  else{
  $(this).html("Username is available!");
  }
  });
  });
}

<body>
<form name="form" method="post" action="" />
<table>
<tr><td>Username: </td>  
<td><input type="text" name="uname" id="uname" /></td></tr>
</table>
<input type="submit" name="submit" value="Register" />
</form>
</body>

I am quite new to jQuery, ajax sort of things...Thanks!

javascritp's analog is .split() and there is .match() method also — Teneff
– Teneff, Commented Apr 15, 2011 at 11:06
So many issues with storing in a flat file. Please tell me the passwords aren't plaintext and are outside of the webroot. Additionally, in order to make the back-end for this, you'll to tell us (and preferably tag) what language you are using.. PHP, ASP, jQuery won't be enough. — Dunhamzzz
– Dunhamzzz, Commented Apr 15, 2011 at 11:07
You're sending parameter user_name, and receiving parameter uname, is one thing I can see at a glance. — Amadan
– Amadan, Commented Apr 15, 2011 at 14:45
Here is nice working example and full source codes for username availability checker ajax jquery my-php-scripts.net/index.php/Jquery/… — nik
– nik, Commented Sep 28, 2011 at 11:24

Amadan · Accepted Answer · 2011-04-15 11:06:20Z

1

Don't do this on clientside. Your passwords, even encrypted, should never leave your server. Make a serverside script that will accept a username and return a boolean, then call it through AJAX.

Also, to answer your direct question, look up JavaScript methods String.split and String.match.

answered Apr 15, 2011 at 11:06

Amadan

200k23 gold badges253 silver badges321 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Michael Over a year ago

Hello, is the match() means exactly match? If I store a username "Johnson", then "John" should be considered valid.

Amadan Over a year ago

match uses regular expressions. You can do either behaviour, depending on what regular expression you write. But again, please don't do it this way.

Michael Over a year ago

Ok, but I don't know how to call it through AJAX if my store it on my server...Anyway, thanks!

Michael Over a year ago

I have found another tutorial, is this what you suggest? roshanbh.com.np/2008/04/…

Amadan Over a year ago

Yes, pretty much exactly it. Now you just need to parse your text file into the PHP array $existing_users, and you're done.

|

Teneff · Accepted Answer · 2011-04-15 11:29:56Z

0

It's recommended NOT to use this code, but just for example you can do it like this

$(function(){
    $parsed={};
    $.ajax({
        url: 'userpass.txt',
        complete: function(data, textStatus, jqXHR) {
            // get all the data and separate it by rows
            $.each(data.responseText.split("\n"), function(i,v){
                // split the rows by colon sign
                $parsed[v.split(":")[0]] = v.split(":")[1];
            });
        }
    });
    // when the user is typing the username
    $('input#username').keyup(function(){
        v = $(this).val();
        // check if the username exists
        if ($parsed[v]) {
            alert("user exists");
        }
    });
});

answered Apr 15, 2011 at 11:29

Teneff

32.3k13 gold badges76 silver badges107 bronze badges

Comments

Peeter · Accepted Answer · 2011-04-15 11:47:38Z

Working example: http://jsfiddle.net/peeter/RszUy/

I hope this example will illustrate how unsafe it is to actually do this.

HTML:

<form id="secureForm">
    <input type="text" id="username"/>
    <input type="password" id="password"/>
    <input type="submit" id="submit" value="Submit"/>
    <div id="results"></div>
</form>

CSS:

#results {
    margin-top: 10px;
}

Javascript:

$(document).ready(function() {
    $("#username").keyup(function(e) {
        totallySecureWayToCheckIfUserExists();
    });
});
function totallySecureWayToCheckIfUserExists() {
     $.post("/echo/html/", {
        html: "joe:frt25t5546g\njohn:sdfsdgg\nthis:isstupid"
    }, function(data) {
        var users = data.split("\n");
        $("#results").html("");
        $.each(users, function(index, row) {
            var username = row.split(":")[0];
            var password = row.split(":")[1];
            if(username == $("#username").val()) {
                $("#results").html("").append("<p>"+"Result found! Username '" + username +"' with the password '"+password+"' exists, you cannot use this username sorry!</p>");
                return false;
            }
            else {
                $("#results").append("<p>"+"Doesn't match the username: " + username +" (password="+password+")</p>");
            }
        });
    });   
}

Collectives™ on Stack Overflow

jQuery: check username availability

3 Answers 3

8 Comments

Comments

Working example: http://jsfiddle.net/peeter/RszUy/

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Working example: http://jsfiddle.net/peeter/RszUy/

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related