Welcome to WebmasterWorld Guest from 54.159.165.175

Forum Moderators: open

Check string against part of regular expression pattern

   
3:14 am on Jul 16, 2014 (gmt 0)

5+ Year Member Top Contributors Of The Month



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.
3:00 pm on Jul 16, 2014 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.
5:45 pm on Jul 16, 2014 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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.
2:11 pm on Jul 19, 2014 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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?
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month