0

I am using Javascript to restrict the characters of various text entry fields as a form of client-side validation as well as improved usability. I am using the following code to do this:

function validNumbers(caller) {
    var exp = /^[\d.]+/g;
    var str = '';
    if (caller.value.match(exp)) {
        str = caller.value.match(exp).toString();
    } else {
        str = '';
    }
    str = str.replace(/\D/g,'');
    caller.value = str;
}

I call this function with onkeypress="validNumbers(this);" and, for the most part, it works like a charm. The problem is that, when I type an invalid character into the field, the value of the field seems to get updated (from the point of view of the Javascript) but the character remains until I hit the next key, at which point it is replaced by the value of the next key visually, even if the next key is invalid as well. The desired effect is that, when an invalid key is pressed, the invalid value doesn't even show up visually. How do I accomplish this?

Edit: I selected the answer below because it got me on the right track. I did have to make sure to add e.shiftKey to my list of excluded events in order to prevent characters like "!@#$%^&*()_+", but that wasn't an issue for me to find out on my own.

Adam
  • 3,668
  • 6
  • 30
  • 55
  • Restricting user input on a character by character basis is an **anti** usability feature. It is much more helpful to tell users what you want in the field (e.g. an on-screen hint of "numbers only" or similar), then validate it at a reasonable time (say when the form is submitted). Let them worry about how they achieve a valid value. – RobG Oct 19 '11 at 02:33
  • I will be doing server-side validation, but by limiting the characters one can place in a text field, I can save them time by saving them the need of going back over their form in search of an obvious problem that I can much more easily take care of for them. If I simply allow them to enter whatever they want to, they don't get immediate feedback on what works and what doesn't work, which could mean searching through all of the text fields for one invalid character. The time issue is the biggest focus of this project, as they will be using these forms sometimes hundreds of times daily. – Adam Oct 19 '11 at 05:07
  • You have other alternatives, such as putting a red border around the input if an invalid character is entered. I find that where characer entry is limited and I accidentally enter an invalid character, I press delete to remove it but the clever programmer has already done that so I delete a valid character instead. How do I find that error? Also, how do you stop pasting or drag and drop of invalid characters? – RobG Oct 19 '11 at 05:19

1 Answers1

1

In your function you are clearing the value after it has been entered into the textfield and evaluated. Instead, you need to prevent it from being entered into the textfield altogether. To accomplish this, you want to use the keydown's preventDefault() method:

onkeydown="function(e) { validNumbers(e); }"

function validNumbers(e) {
    if (e.keyCode == 1 || e.keyCode == 2 ... etc) {
        e.preventDefault();
    }
}

This will block specific characters (reference here) from ever entering the input field. Note that this will not block copy and paste so you will either still need to evaluate the entire string 'onpaste' or prevent 'onpaste' with a similar event handler.

This is also not a cross-brower solution but should get your feet plenty wet. See this JSFiddle for a live example.

skyline3000
  • 7,639
  • 2
  • 24
  • 33