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;
}

Answer 1

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.

Answer 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()....

        }
    });