Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS jQuery Basics (2014) Creating a Password Confirmation Form Perfect

Wanted to share some additional functionality I added to this project :)

I decided to revisit this project to add a bit of additional functionality. I wanted to test for the presence of 'invalid' characters in the username field. I did so by using a Regular Expression (i.e. regex for short), and thought this would be a nice technique to share with my awesome Treehouse classmates that goes a bit beyond what's required in this lesson.

Here's the additional code:

//check if username is valid
var usernameValid = function () {
    var str = $username.val();
    return /^[a-zA-Z0-9]*$/.test(str);
};

var usernameEvent = function () {
    //if valid
    if (usernameValid()) {
        //hide
        $username.next().hide();
    } else {
        //show
        $username.next().show();
    }
};

//when user focuses on $username
$username.focus(usernameEvent).keyup(usernameEvent).keyup(confirmationEvent).keyup(enableSubmitEvent);

As you may have guessed, I added both a new span into the HTML for the username hint and usernameValid() to the canSubmit function.

You can manipulate the regex based on what you would choose to allow a user to include in their username.

Feel free to shoot any questions my way, or use this thread to expand even further on the functionality I've introduced here. Sharing is caring!

Awesome use of regex, Chris!

Liam Maclachlan
Liam Maclachlan
22,805 Points

Massive win, dude. Like it.

You can also include the underscore, too :)

^[a-zA-Z0-9_]*$

Well shucks. Thanks guys.

Liam,

I actually included that at first, but for brevity's sake, I wanted the hint to say "only alphanumeric characters allowed", so I excluded hyphens and underscores. But yeah, that works perfectly!

Liam Maclachlan
Liam Maclachlan
22,805 Points

After After a good night sleep, this has now inspired me to add this to a php database search function, to help order the results by specificity using the regex modifiers and multiple sql queries, before returning the results. Again, thanks for sharing man :)

Liam Maclachlan schweet.