Issue with username regex validation

Question

I searched SO before posting, but couldn't find an answer that would work for me.

Below is a simple JS script to test a username.

The username length validation work fine BUT the character validation doesn't:

All non-allowed characters (such as $%;[+)) pass whereas they should return an error.

<script type="text/javascript">
 $(document).ready(function() {
    $("#username").change(function() {
        var username = $("#username").val();
        var msgbox = $("#status");
        var usernameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\._-]$i/

         if ((username.length >= 4 && username.length <= 20) &&  
 (usernameRegex.test(username.value) == false)) {

            $.ajax({
                type: "POST",
                url: "username.php",
                data: "username=" + username,
                success: function(msg) {

                    if (msg == 'OK') {

                        msgbox.html('<img src="ok.png">');

                    } else {
                        msgbox.html(msg);
                    }
                }
             });
        } else {

            $("#status").html('<img src="no.png">Try again');
        }
     });
});
</script>

What am I missing?

username = $("#username").val() then again in the statement username.value I think you are putting the wrong thing in your if statement — Toby L Welch-Richards
– Toby L Welch-Richards, Commented Sep 19, 2013 at 20:28
Shouldn't usernameRegex.test(username.value) == false be usernameRegex.test(username.value) == true? — Rohit Jain
– Rohit Jain, Commented Sep 19, 2013 at 20:30

theftprevention · Accepted Answer · 2013-09-19 20:37:09Z

1

There's a problem with your regular expression, and it's not just the $i/. You have:

var usernameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\._-]$i/;

That second token, [a-zA-Z0-9\._-], is only evaluated once. It checks the first character for the first token, then the second character for the second token, and then expects the end of the string because of $. Even after changing your test condition to true and fixing the rest of the logic, your original regular expression will fail all usernames above two characters.

Try this instead:

var usernameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\._-]+$/i;

The + ensures that the regex will look for at least one character in the token, and match them until the string ends.

Finally, as others have mentioned, you need usernameRegex.test(username) instead of usernameRegex.test(username.value), and it needs to test for a true value, not false.

See a working demo here.

answered Sep 19, 2013 at 20:37

theftprevention

5,2433 gold badges21 silver badges32 bronze badges

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

1 Comment

Caro_deb Over a year ago

Thanks ! Indeed, there was something wrong with the regex too !

Schleis · Accepted Answer · 2013-09-19 20:30:38Z

1

You are examining the results of your test backwards. The test() method returns true if the pattern matches. And you are checking for a false value.

Change it to:

if ((username.length >= 4 && username.length <= 20) 
    &&  usernameRegex.test(username.value)) {

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FRegExp%2Ftest

answered Sep 19, 2013 at 20:30

Schleis

44.2k8 gold badges73 silver badges90 bronze badges

Comments

Ibrahim Najjar · Accepted Answer · 2013-09-19 20:30:54Z

1

/^[a-zA-Z0-9][a-zA-Z0-9\._-]{4,20}$i/
                                  ^^
                        Here is the problem

You probably wanted to specify the case-insensitive flag but by accident you put i inside the regular expression pattern itself, you need to modify your expression to this:

/^[a-zA-Z0-9][a-zA-Z0-9\._-]{4,20}$/i

and as they guys have pointed out you should test for a true condition or in other words, you need to check if the string actually matches the pattern and thus contains only the characters you allow.

answered Sep 19, 2013 at 20:30

Ibrahim Najjar

19.5k4 gold badges74 silver badges96 bronze badges

Collectives™ on Stack Overflow

Issue with username regex validation

3 Answers 3

See a working demo here.

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related