What is the best way to limit text input entry to numbers, lowercase letters, and certain symbols?

Question

Without using jQuery, what is the best way to limit text entry of a textbox to numbers, lowercase letters and a given set of symbols (for example - and _)? If the user enters an uppercase letter, I would like it to be automatically converted to a lowercase letter, and if the user enters a symbol not within the given set, I would like to be able to instantly show a validation error (show some element adjacent to or below the text box).

What's the cleanest cross-browser way of doing this without the aid of jQuery?

Answer 1

Attach the following to your elements onkeyup event.

function onkeyup() 
{
    var el = document.getElementById("id"); // or however you want to get it

    el.value = el.value.toLowerCase(); // covert to lower case

    if (el.value.match(/[^-\d\w]/)) // check for illegal characters
    {
        // show validation error
        ...
        // remove invalid characters
        el.value = el.value.replace(/[^-\d\w]/g, "");
    }
    else
    {
        // hide validation error
    }
}

The regex matches any character which is not a digit, a letter, a hyphen or an underscore.