Progressive validation of a date in Javascript

Question

I have this pattern for the Date:

var regexFormat = "\\d{2}-\\d{2}-\\d{4}"

Whenever the user presses one key, I have to check whether the inserted value "may be" a valid Date.

E.G. if the users presses 0, 1, - the "live" validator must be saying "yes, it may be a date", while if the user presses an "a", for example, the validator must return false.

So my question ultimately is: how can I perform a "partial" validation?

Thanks!

OK, so not to be marked as off-topic, I "reward" you with this ugly attempt to solve my problem:

_getDaysList: function (startingDate ,callback) {
    var that = this,
        currentDate = new Date(),
    partialDate = /^(\d(\d(-(\d(\d(-(\d(\d(\d(\d)?)?)?)?)?)?)?)?)?)?$/,
    partialYear = /^(\d(\d(\d(\d)?)?)?)?$/,
    partialMonth = /^(\d(\d)?)?$/,
    partialDay = /^(\d(\d)?)?$/,
    list = [];

    if (partialDate.test(startingDate)) {

        var counter = 0;
        while ( startingDate.length != 10 && counter <=5000) { 
            counter++;

            if (// And matches a specific date
                    that._startsWith(that._dateToString(currentDate),startingDate)) {

                // La data segue il parametro.
                list.push(that._dateToString(currentDate));
                if (that._isFunction(callback)) { 
                    callback(list); 
                }
                return;
            }
            currentDate = that._addDays(currentDate, -1);
        }
    }

    if (that._isFunction(callback)) { 
        callback(list); 
    }
    return list;
}

Scott Sauyet · Accepted Answer · 2013-12-06 14:38:58Z

4

It's a bit ugly, but something like this might work:

var partialDate = /^(\d(\d(-(\d(\d(-(\d(\d(\d(\d)?)?)?)?)?)?)?)?)?)?$/;

partialDate.test(""); //=> true
partialDate.test("a") //=> false
partialDate.test("1"); //=> true
partialDate.test("12"); //=> true
partialDate.test("12-a"); //=> false
partialDate.test("12-2"); //=> true
partialDate.test("12-25"); //=> true
partialDate.test("12-25-2"); //=> true
partialDate.test("12-25-2"); //=> true
partialDate.test("12-25-20"); //=> true
partialDate.test("12-25-201"); //=> true
partialDate.test("12-25-201fooled you"); //=> false
partialDate.test("12-25-2013"); //=> true
partialDate.test("12-25-2013 is a holiday"); //=> false

This is just wrapping an optional group around every subsequent character.

answered Dec 6, 2013 at 14:38

Scott Sauyet

50.9k5 gold badges57 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alex89x Over a year ago

As you said, ugly but effective!

tha2nddunn · Accepted Answer · 2013-12-06 14:46:19Z

2

You could use a long regexp with a lot of grouped OR conditions.

I would validate the key press input first, since you know your input should only be \d or -, if its anything else return false.

Then if it passes the first input validation, combine it with your variable storing the combined date string and validate whether the pattern is correct. I'm being lazy, I'm sure I could come up with a regexp that would catch all, but its only 10 characters, you could check the date string length and validate based on the length and the correct pattern. It gives you some flexibility on what you might want to do with error notifications. I'm using jquery in my example.

  var date_string = "";
  $('input[type="date"]').keyup(function(){
        self = $(this).val();
        if(self.val().match(/(\\d|-)/){
            if(date_string.length() == 2 && date_string.match(regex_for_2_chars)){
               date_string += self.val();
            }
            else if()....

        }
    });

answered Dec 6, 2013 at 14:46

tha2nddunn

462 bronze badges

1 Comment

alex89x Over a year ago

The answer is nice and correct, but I'm using it in a multiple-source and multiple-word autocomplete, so the pre-validation is, unfortunately, not an option. Thanks anyway!

Collectives™ on Stack Overflow

Progressive validation of a date in Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related