javascript - regex letters only keypress as event - Stack Overflow

I wonder what seems to be the problem in here.

$("#city_field").bind({
  keypress: function(event){
    var  regex = /^[a-zA-ZäöüÄÖÜ]/;
    if (regex.test($("#city_field").val())==true) {
    $('.r_validation').html('').css('background-color', '');
    } else {
        $('.validation').html("TEST").css('background-color', 'red');
    }
  }
});

Whenever I input letters it is valid, then when I input numbers the red validation notice appears. Everything is fine at this point, not until I entered numbers after letters. The following should be invalid, but in my current script it is seen as valid:

• foo1212
• foo,
• foo, [with space after ma]

What I really want to validate is to ONLY accept letters and dash (-), nothing more other than that.

Thanks.

EDIT

For the record, the last ment of @Adam Rackis solved the issue, I ended up with this working code.

$(function(){
  $("#city_field").bind("keyup",
    function(event) {
      var regex = /^[a-zA-ZäöüÄÖÜ]+$/;
      if (regex.test($("#city_field").val())==true) {
        $('.validation').html('').css('background-color', '');
      } else {
          $('.validation').html("TEST").css('background-color', 'red');
      }
  });
});

I wonder what seems to be the problem in here.

$("#city_field").bind({
  keypress: function(event){
    var  regex = /^[a-zA-ZäöüÄÖÜ]/;
    if (regex.test($("#city_field").val())==true) {
    $('.r_validation').html('').css('background-color', '');
    } else {
        $('.validation').html("TEST").css('background-color', 'red');
    }
  }
});

Whenever I input letters it is valid, then when I input numbers the red validation notice appears. Everything is fine at this point, not until I entered numbers after letters. The following should be invalid, but in my current script it is seen as valid:

• foo1212
• foo,
• foo, [with space after ma]

What I really want to validate is to ONLY accept letters and dash (-), nothing more other than that.

Thanks.

EDIT

For the record, the last ment of @Adam Rackis solved the issue, I ended up with this working code.

$(function(){
  $("#city_field").bind("keyup",
    function(event) {
      var regex = /^[a-zA-ZäöüÄÖÜ]+$/;
      if (regex.test($("#city_field").val())==true) {
        $('.validation').html('').css('background-color', '');
      } else {
          $('.validation').html("TEST").css('background-color', 'red');
      }
  });
});

• javascript
• jquery
• regex
• bind
• keypress

Share Improve this question Follow edited Jan 13, 2012 at 6:12 planet x asked Jan 13, 2012 at 5:36 planet xplanet x 1,62755 gold badges2727 silver badges4444 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Your regex is matching only one character. You need to put that input over a Kleene closure, then put an end of string marker:

/^[a-zA-ZäöüÄÖÜ]*$/;

Or if you want to make sure there's at least one character, you'd use the positive closure:

/^[a-zA-ZäöüÄÖÜ]+$/;

Which produces:

var r = /^[a-zA-ZäöüÄÖÜ]+$/;

console.log(r.test('Foo'));    //true
console.log(r.test('Foo123')); //false
console.log(r.test('foo,'));   //false 
console.log(r.test('foo, '));  //false
console.log(r.test('foo '));   //false

DEMO

ALSO, make sure you catch the keyup event, since keypress fires before the text in your textbox updates, so you're always validating one character behind.

---

So on your Regex:

/^[a-zA-ZäöüÄÖÜ]/;

When testing Foo123 the F would be consumed, and that's it. Done.