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.