homepage Welcome to WebmasterWorld Guest from 54.145.172.149
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Check string against part of regular expression pattern
ocon

5+ Year Member



 
Msg#: 4688067 posted 3:14 am on Jul 16, 2014 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4688067 posted 3:00 pm on Jul 16, 2014 (gmt 0)

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

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



 
Msg#: 4688067 posted 5:45 pm on Jul 16, 2014 (gmt 0)

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

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



 
Msg#: 4688067 posted 2:11 pm on Jul 19, 2014 (gmt 0)

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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved