Javascript RegExp to only allow certain characters at certain places

Question

I want to use a regexp to "force" a user to correctly format a timestamp.

At the moment I can restrict input so that the user can only input numbers, a dash, or a colon using the following:

function allownumbers(e) {
        var key = window.event ? e.keyCode : e.which;
        var keychar = String.fromCharCode(key);
        var reg = new RegExp("[-0-9: ]")
        if (key == 8) {
            keychar = String.fromCharCode(key);
        }
        if (key == 13) {
            key = 8;
            keychar = String.fromCharCode(key);
        }
        return reg.test(keychar);
    }

However, the user could still enter invalid data, e.g. 0000::--12354 would validate.

Can I use a regexp to force the user to enter ####-##-## ##:##:## (e.g. 2010-12-15 10:57:01)?

(Even cooler would be if it automatically added the dashes, colons and space when it hit the correct place in the string.)

Cheers,

Ben

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

Use the jQuery validation plugin.

Since you have a custom date format, I'll point you to this SO post.

If you want to force a certain pattern during input, look no further than masked input plugin.

edited May 23 '17 at 12:04

Community

1
1

answered Dec 15 '10 at 12:46

darioo

46,442
10
75
103

That's overkill - why bring in a whole other library for a small task like this? – Benubird Dec 15 '10 at 12:58
@Benubird: not overkill in my opinion; if it'll be used in many places and possibly different input rules, why not use it? It's a good solution for a common problem. – darioo Dec 15 '10 at 13:00
Because there is no implication that more than this single, simple task is required; For all we know, this might be the only javascript on the entire site - you're assuming that he has 'many places' where it will be used, but that might not be the case. Not to mention, that you haven't actually answered the question. He was asking about the use of regular expressions; just saying 'go use a library' is very unhelpful, because it doesn't provide any information. – Benubird Dec 17 '10 at 17:20

score 0 · Answer 2 · answered Jul 03 '13 at 14:40

Why not just use a small block of validation? after they've entered the string...

var date = new Date(dtStr);
if (isNaN(date) && dtStr != "MM/DD/YYYY") {

    return alert('Please enter a valid date');
}
else {
    if (date.getFullYear() > 2100 || date.getFullYear() < 1900) {
        return alert("Please enter a valid year");
    }
}

score 0 · Answer 3 · answered Dec 15 '10 at 12:52

0

Your regexp pattern can be

var re = /\d\d\d\d-\d\d-\d\d \d\d:\d\d:\d\d/;

answered Dec 15 '10 at 12:52

garrik

63
1
7

score 0 · Answer 4 · answered Dec 15 '10 at 12:55

You can do this easily - just use {} to limit the number of entries. As a fairly crude example, regex: [0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2} will do what you want, just test it against the whole content of the textbox - e.g. reg.match(e.srcElement.value).

If you want it to be testing as you go along, you can use the code from this site to determine the cursor position, and then check the new input against what you are expecting at that position, and yes, even add in the dash or space automatically.

Javascript RegExp to only allow certain characters at certain places

4 Answers4