Check string against part of regular expression pattern

[ocon]

I'm using JavaScript to only allow certain characters to be typed into an input box.

<input type="text" id="birthdate" maxlength="14" placeholder="MM | DD | YYYY" pattern="^(0[0-9]|1[0-2])\s\|\s(0[0-9]|[12][0-9]|3[01])\s|\s(19[0-9]{2}|200[0-9]|201[0-4])$" />

$("birthdate").addEventListener("keypress", function(e){
var e = e || window.event;
var k = String.fromCharCode(e.keyCode||e.which);
if(!/\d|\s|\|/.test(k)) e.returnValue = false;});

I'd like to change this to allow only characters following a pattern to be typed.

$("birthdate").addEventListener("keypress", function(e){
var e = e || window.event;
var k = String.fromCharCode(e.keyCode||e.which);
var pattern = /^(0[0-9]|1[0-2])\s\|\s(0[0-9]|[12][0-9]|3[01])\s|\s(19[0-9]{2}|200[0-9]|201[0-4])$/;
if(...) e.returnValue = false;});

I'm not trying to test if the input matches the full pattern (done upon submission), I'm only trying to block the user from typing characters that violate the pattern.

[Fotiman]

That's tough, because you'll need to test against subsets of the full pattern. For example, say the input is empty and the user presses the "1" key... that's the beginning of a valid input, but it would not match that pattern because that pattern is checking for the full value.

[lucy24]

You'll also save yourself some aggravation if you break the input into its constituent parts right away. It can be formatted to look like all one box, but handle each one separately. Then any non-digit input can be construed as "move to next field".

So you have:
Field 1 (month, and make sure you say this plainly so as not to confuse non-American visitors who won't expect a month in this position):
first input \d (because some users will ignore "leading 0" instructions)
if first was 0: ignore any further 0 and wait for [1-9]
if first was 1: [0-2] ignoring [3-9]
if first was [3-9]: supply leading 0 and proceed directly to second field
AND
if first was[1-9] and second is \D then proceed as above with added leading 0

Field 2:
same, only this time the breakdown is 0 vs. [1-2] vs. [3-9]

Will you allow them to type 02/30 and yell at them later, or do you want to block it right away? Same of course for SAJN, but 02 is the most clear-cut.

I'm only trying to block the user from typing characters that violate the pattern.

It may be easier to let them type anything they like and just ignore the non-permitted ones.

Incidentally, have you got many three-year-old members? At this point there are not even many situations where a year beginning in 20xx would be valid.

[penders]

I'm just wondering how this would work from a users perspective? What happens when a user types an invalid character? Who is this targeting? I can imagine this type of "as-you-type" validation could be an annoyance for more experienced users... a user hammers out a date, immediately realises they've typo'd, hit the backspace and end up deleting the last valid character they typed, because the typo wasn't accepted as valid input anyway?