What did I do wrong here? [Javascript Regex]

Question

So I am writing a registration form and I need the display name to be only numbers, letters and underscores.

Have a look at my code and tell me what I'm doing wrong.

<form method="post" action="/" onsubmit="return check_form()">
    <input type="text" id="display-name" name="display-name" maxlength="255" />
    <input type="submit" />
</form>
<script type="text/javascript">
<!--
    var name_regex = /^([a-zA-Z0-9_])+/

    function check_form()
    {
        if (!name_regex.test(document.forms[0].elements[0].value))
        {
            document.forms[0].elements[0].focus()
            alert("Your display name may only contain letters, numbers and underscores")
            return false
        }
    }
-->
</script>

It's obviously been trimmed down to not include anything not related to the problem but even this snippet doesn't work.

Answer 1

Your regex

/^([a-zA-Z0-9_])+/

Looks for

1. Start of string(check), followed by
2. 1 or more letters, numbers, or underscore (check)

And then whatever comes after it doesn't matter. This regex will match anything at all so long as it begins with a letter, number, or underscore

If you put a $ at the end, then it will work - $ matches 'end of string', so the only way it can match is if there are only numbers, letters, and underscores between the start and end of the string.

/^([a-zA-Z0-9_])+$/

Secondly, I'd suggest using document.getElementById('display-name').value instead of document.forms as it won't break if you rearrange the HTML, and is more 'the commonly accepted standard of what to do'

Answer 2

My regexp would go along the lines of: /^[a-zA-Z0-9_]+$/

edit: I think it's the lack of a line end $ that makes it fail.

Answer 3

What does "doesn't work" mean? Does it reject valid display names? Does it accept invalid display names? Which ones?

Per @Annan, leaving off the $ would make the regexp accept invalid display names like abc123!@#.

If the code is rejecting valid display names, it may be because the parentheses are being matched literally instead of denoting a group (I'm not sure of the quoting convention in JS).

Answer 4

A simpler way to write it still would be

var name_regex = /^([a-z0-9_])+$/i;

Answer 5

Even simpler:

var name_regex = /^\w+$/;

Answer 6

I tested your script and meddled with the javascript. This seem to work:

<form method="post" action="/" onsubmit="return check_form()">
    <input type="text" id="display-name" name="display-name" maxlength="255" />
    <input type="submit" />
</form>
<script type="text/javascript">
    <!--
    var name_regex = /^([a-zA-Z0-9_])+$/;

    function check_form()
    {
        if (!name_regex.test(document.forms[0].elements[0].value))
        {
            document.forms[0].elements[0].focus();
            alert("Your display name may only contain letters, numbers and underscores");
            return false;
        }
    }
    -->
</script>

Answer 7

Sorry guys I should have been more specific. Whenever I added spaces the values were still being accepted. The dollar sign $ did the trick!

Answer 8

By 'not working' I take it you mean it is letting invalid entries through (rather than not letting valid entries through).

As @Annan has said, this would probably be due to the lack of the $ character at the end of the expression, as currently it only requires a single valid character at the start of the value, and the rest can be anything.