ClientSide Username Checking, EE and jQuery

Jul 27
2010
ClientSide Username Checking, EE and jQuery

As a follow-up to my previous tweet about jQuery form processing, one of the other jobs I needed for my last project was an ‘auto-check’ functionality whereby I could tell a user whether their chosen user name was available or not *before* they posted the form.

To do this, I simply used a custom/hidden template group/file, the {exp:query} tag and jQuery to pull it all together.

Firstly, you need to create yourself a new template group / file. These suggestions are purely for examples, you can call them what you want:

  • Template Group “_ajax”
  • Template File “username_check”

Ok – now that you have them, open the username_check template and enter the following:

{exp:query sql="select username from exp_members where username = '{segment_3}'"}
{username}
{/exp:query}

Note: If you have a multi-lingual set up like my previous post on Multilingual sites in EE, then you will need to change {segment_3} for {segment_4}.

To test your setup, you can simply now visit http://www.yoursite.com/_ajax/username_check/{username} and if a user exists it should return you the username else it will return a blank page.

(I had thought about turning the returned data into a JSON or XML response with more details, however this would then be open to misuse – so decided against it).

Now for the jQuery Implementation:

Firstly, create your input field and a container to handle your returned messages:

<input type="text" name="username" id="frm_username" value="" /> <p class="username_return"></p>

Then, either in the <head> or in a js file – simply put the following:

$(document).ready(function(){
$("#frm_username").keyup(function(){
$.ajax({
type: 'GET',
url: '/index.php/_ajax/username_check/'+$(this).val(),
success: function(data){
if (data=="")
{
$("p.username_return").html("Username Available")
$("p.username_return").css('background-color','#00ff00');}
else
{
$("p.username_return").html("Username Not Available, please choose another!")
$("p.username_return").css('background-color','#ff0000');
}
}
})
return false;
})
})

And thats it! You can extend this beyond the example here, for example, disable the submit button, change the colour of the input field, make the input field shake etc etc – the possibilities are endless!

Likewise, you can extend the script to check for anything you want – screen_name, email etc etc.

  • Share/Bookmark

6 Tweets

11 Responses to “ClientSide Username Checking, EE and jQuery”

  1. cwcrawley says:

    Day #2, Blog Post 2: Clientside Username Auto-Check, EE and jQuery http://tinyurl.com/349j96w #eecms #expressionengine pls RT! :)

    This comment was originally posted on Twitter

  2. robhampson says:

    Day #2, Blog Post 2: Clientside Username Auto-Check, EE and jQuery http://tinyurl.com/349j96w #eecms #expressionengine (via @cwcrawley)

    This comment was originally posted on Twitter

  3. LKWave says:

    ClientSide Username Checking, ExpressionEngine and jQuery … http://bit.ly/aFXm8x #jQuery

    This comment was originally posted on Twitter

  4. cwcrawley says:

    For my US followers: 2 New Blog Posts http://tinyurl.com/349j96w and http://tinyurl.com/2wq6d3x #eecms #expressionengine Pls RT!

    This comment was originally posted on Twitter

  5. johnmorton says:

    ClientSide Username Checking, EE and jQuery « Digital Meanderings http://bit.ly/cYwHLJ Nice #eecms tip!

    This comment was originally posted on Twitter

  6. Michael C. says:

    If you have SolSpace’s User module and are using the “Email as Username” option, this won’t work, as EE’s URL parsing functions don’t allow @ signs in the URL; you’ll get a “Disallowed Key Characters” error when viewing the template.

    If anyone has a workaround to this, please post it. :)

  7. Carl Crawley says:

    Good point… In theory of course, you could just URLEncode() the email address in the jQuery and then URLDecode it back before you do the SQL statement and job done.

    Regards,

    Carl.

  8. Michael C. says:

    Actually, you can’t (I think). If the URLEncode() converts the @ into %40, it still triggers EE’s security and returns the “Disallowed Key Characters”.
    The workaround I figured out was to use PHP and some custom URL wrangling. The query would then be:


    {exp:query sql="select username from exp_members where username = ''< ?php echo $_GET['username']; ?>"}
    {username}
    {/exp:query}

    Obviously, PHP would need to be enabled for that template, and set to Input. The script would also need to be changed; the “url: ‘…’” line would read:


    ....
    /index.php?/assets/username_check/&username='+$(this).val(),
    ...

  9. Carl Crawley says:

    Interesting… The other way potentially would be to split the value based on @? So then you get /user_check/email/domain.com

    Then you could just reconstitute the link {segment_2}@{segment_3} ?

  10. Michael C. says:

    Yeah, that would work too, but that would require a tiny bit more than elementary-level Javascript skills to implement, and thus is beyond me. ;)

    The problem with that, however, is relying on splitting the value at the @. What if the field you’re checking doesn’t have an email address for content, but something else that EE blocks? Say, if you’re checking the user’s desired screen name (which apparently has to be unique unless you hack the core files), and a user wants the screen name “Dr. M’Benga”, you run into problems with the apostrophe (and possibly the space as well).

  11. Carl Crawley says:

    Splitting the value based on the @ is relatively simple, but yet this does rely on having the email address.

    Your second point is also quite valid, although any site which allows a username such as “Dr. M’Benga” – I would question. ;)

    You could extend the functionality I’ve written to validate the fields to ensure that spaces are not allowed, special characters etc (unless you’re using email as username)

    It’s certainly not intended as a foolproof solution, but it’s a basis which you could use to extend with relative ease (or contract my services to do it! :-) )

    Each case is different as you’ve quite rightly mentioned – hopefully it’ll give inspiration.

    C

Leave a Reply

Additional comments powered by BackType

Links of Interest!

Here are some links of sites/people that I find interesting...

Compliances

This page and most pages on this site should comply with w3c validation where appropriate. If you find it doesn't, please notify me