I want to limit input to letters numbers and spaces.

And I want it to run on keyup so the user sees other characters being rejected. In other words, I don't want the illegal characters to remain in the field and only get deleted after submission.

I tried this...

$('#custName').keyup(function() {
    $(this).val($(this).val().match(/^[\w\s]+$/));
});

Fiddle

But as soon as an illegal character is entered, the whole string is deleted.

How can I prevent illegal character as it is entered, while keeping the legal ones?

I want to limit input to letters numbers and spaces.

And I want it to run on keyup so the user sees other characters being rejected. In other words, I don't want the illegal characters to remain in the field and only get deleted after submission.

I tried this...

$('#custName').keyup(function() {
    $(this).val($(this).val().match(/^[\w\s]+$/));
});

Fiddle

But as soon as an illegal character is entered, the whole string is deleted.

How can I prevent illegal character as it is entered, while keeping the legal ones?

• javascript

• When your regex match fails (i.e. no legal character found) it returns a null. You are setting then updating the value of that input box to null (hence the delete). – Alan Commented Aug 1, 2016 at 21:08
• "And I want it to run on keyup so the user sees other characters being rejected." This is terrible. The users would frequently get confused. "Hey, I'm sure, I wrote that, where did it go?" And some users will not even be doing touch typing but watching the keyboard. If you want to reject invalid input do it very explicitly. There are dozens of validation libraries for JavaScript that would display a clear message of what is wrong and why. Libraries that would be way more user friendly than this and would also help you not reinventing the wheel. – VLAZ Commented Aug 1, 2016 at 21:33
• I have text below the input field that states "Enter letters, numbers and spaces only" – webguy Commented Aug 1, 2016 at 22:01
• That doesn't guarantee people would "see the characters being rejected". Again - hunt-and-peck typers would be focused on the keyboard. You are trying to reinvent validation which already has been implemented. In dozens of variations, at that. Want people to notice? Show them that they've entered something wrong. You are doing the exact opposite by hiding it. If you just want to sanitize input, you may not really need users to know. However, given the id of that field, I'd say "Jean-Claude Van Damme" would be disappontend he suddenly got renamed. – VLAZ Commented Aug 1, 2016 at 22:27

3 Answers 3

.match() is returning either:

• An array of strings (just one in your existing code) in case of a match: in your case -- by luck -- it was coerced to a string, so it seemed to work as expected
• null in case of no match: that's why the entire input was lost

What you need is more like:

$('#custName').keyup(function() {
    $(this).val($(this).val().replace(/[^\w\s]+/g, ''));
});

As noticed by Hanlet, another potential issue with this approach is that some browsers will fire a keyup event for non printable characters. So, you may have to filter them with a test on event.keyCode.

Validation for name // will accept alphabets and space and backspace

$('.nameonly').on('keydown', function(e){
    if ((e.which < 65 &&  e.which != 32 && e.which != 8) || e.which > 90 ) {
        return false;
    }
});

Yes just like that @Arnauld but I would use:

$('#price').on('change keyup paste mouseup', function() {
    this.val = $(this).val($(this).val().replace(/[^\w\s]+/g, ''));
}).bind('paste', function () {
    $(this).val(this.val.replace(/[^\w\s]+/g, ''));
});

This prevents pasting of special characters.