Field validation with JavaScript - onkeyup?

Question

i have a code here triggered by an onkeypress... i want it to alert whenever there is a special character typed. Aside from an alert, if the user will type a special character in a field, the typed special character should be erased and the focus should go back to the field. I can't seem to shake this problem. Can you help me? thanks in advance :D

function ei(e)
{
  var iChars = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?";
  for (var i = 0; i < e.value.length; i++) {
    if (iChars.indexOf(e.value.charAt(i)) != -1) {
      alert ("Please do not use special characters.");
      e.value = e.value-1;
      e.focus();
      return false;
    }
  }
}

this will be called in text field.. like this

<input type="text" name="name" onkeyup="ei(this)">

You can't use e.value = e.value-1 to remove the last character: the - operator is for numeric subtraction. You can use e.value = e.value.slice(0,-1) to remove the last character, but removing the last character isn't actually appropriate given that the cursor may not be at the end of the string (user may be inserting characters in the middle). — nnnnnn
– nnnnnn, Commented Mar 5, 2012 at 4:56

Jamison Dance · Accepted Answer · 2012-03-05 06:52:24Z

There are a few weird things going on here.

You don't want to use the onkeyup attributes of HTML elements. Bind an event listener function, which keeps your code more modular.
Like others said, you can't use the subtraction operator like that.

You probably don't want to alert every time someone types an invalid character. That will only annoy and anger a user. I am just logging it to the console, but you should think about putting the error text next to the input element.

$(function () {
  function ei(e) {
    var iChars = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?";
    for (var i = 0; i < this.value.length; i++) {
      if (iChars.indexOf(this.value.charAt(i)) != -1) {
        console.log("Please do not use special characters.");
        this.value = this.value.slice(0, this.value.length - 1);
        this.focus();
        return false;
      }
    }
  }

  $('#hurp').on('keyup', ei);
});

And add an id to your input element:

<input type="text" name="name" id="hurp">

See this JSFiddle: http://jsfiddle.net/QgLcB/

Aaron Powell · Accepted Answer · 2012-03-05 05:04:15Z

1

Why would you bother using the keyup event? It'd be better off using the keydown or keypress event and then cancelling it (I used this site to find the keycodes):

function ei (event) {
    event = event || window.event;

    switch (event.keyCode) {
        case 47: //.
        case 33: //!
        //etc
            event.preventDefault(); //cancel the current action, which will stop it writing out to the textbox
            break;
        default:
            break;
    }
}

I would also suggest you look into jQuery rather than having inline JavaScript to hook up your events and also take a look at the jQuery Validation plugin as that should help take care of a lot of your code.

answered Mar 5, 2012 at 5:04

Aaron Powell

25.1k18 gold badges102 silver badges151 bronze badges

Comments

epascarello · Accepted Answer · 2012-03-05 04:53:43Z

1

e.value = e.value-1; is not doing what you think.

You probably want to use substr()

answered Mar 5, 2012 at 4:53

epascarello

208k20 gold badges206 silver badges246 bronze badges

1 Comment

nnnnnn Over a year ago

Or .slice(), because it'll accept a negative number for the end-point (which .substr() doesn't do consistently cross-browser).

Collectives™ on Stack Overflow

Field validation with JavaScript - onkeyup?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related