Javascript date validation - year and full stops

Question

Checking fields:

checkFields = function() {
  var colCheck = 0;
  var colArray = [];
  var colDupArray = [];
  var iDate = $("check_date").value;
  if(iDate.length > 0) {
    var a = iDate.split("/"); 
    if(isValidDate(a[0],a[1]-1,a[2]) == false){
      alert("You have entered an invalid date. Please amend!");
      return false;
    }

Validation:

isValidDate = function(day,month,year) {
  var dteDate;
  dteDate=new Date(year,month,day);

  var day = dteDate.getDate();
  var month = dteDate.getMonth() + 1;
  var year = dteDate.getFullYear();

  var formatted =
      (day < 10 ? "0" : "") + day + "/"  +
      (month < 10 ? "0" : "") + month + "/"  +
      year;

  return
+day === dteDate.getDate() && 
+month === dteDate.getMonth() &&
+year === dteDate.getFullYear();
}

The problem is that my code is accepting a date such as "03.06.2012" when I only want it to accept slashes between the numbers.

It also accepts "03/06/12" when I only want a four digit year.

Any ideas?

Why not use your formatter to render a valid date to your textfield? You are trying to validate a text field against your format. stackoverflow.com/questions/3605214/… — Tim Vermaelen
– Tim Vermaelen, Commented May 1, 2013 at 14:47
see stackoverflow.com/questions/51224/… for inspiration too — Aprillion
– Aprillion, Commented May 1, 2013 at 15:04
Your isValid function is completely messed up. Is that only a c&p error or the actual code you're using? It will never return true. — Bergi
– Bergi, Commented May 1, 2013 at 15:07

Tim Vermaelen · Accepted Answer · 2013-05-01 17:05:49Z

2

As suggested this let's the user enter a date in a format of choice. The output should be as expected for you.

I've expanded my little demo with a Date.prototype.formatDateField and a library called moment which also seems to be pretty clean. As third option the jQuery-UI $.datepicker.formatDate()

Still this isn't bulletproof and maybe you should look for a datepicker which can handle the format for you. The best solution to your problem imho.

If you want to go custom however this might get you started:

// prototype
Date.prototype.formatDateField = function (options) {
    var i = 0,
        date = [],
        len = date.push(this.getDate(), this.getMonth() + 1, this.getFullYear());

    for (; i < len; i += 1) {
        var chunk = date[i];
        date[i] = chunk < 10 ? options.pad + chunk : chunk;
    }

    return date.join(options.separator);
};

// Setup output
var cfg = {
    fieldDate: "#fieldDate",
    options: {
        pad: "0",
        format: "dd/MM/yyyy",
        separator: "/"
    }
};

// function to call
function reformatInput(){
    $(cfg.date).blur(function(){
        var moment = moment(this.value).calendar(cfg.options2.format),
            prot = new Date(this.value).formatDateField(cfg.options2),
            jqueryui = $.datepicker.formatDate(cfg.options2.format, new Date(this.value));

        $(cfg.fieldDate1).val(moment);
        $(cfg.fieldDate2).val(prot);
        $(cfg.fieldDate3).val(jqueryui);
    });
}

// run on demand
reformatInput();

demo: http://jsfiddle.net/tive/YvdKA/

edited May 1, 2013 at 17:05

answered May 1, 2013 at 16:37

Tim Vermaelen

7,0792 gold badges27 silver badges39 bronze badges

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

1 Comment

arturomp Over a year ago

+1 on moment.js. it can be glorious once you get the hang of it. (its website is also pretty remarkable.)

Bergi · Accepted Answer · 2013-05-01 18:53:51Z

1

You somehow mixed a formatting with a validating function. This is how it should be:

function isValidDate(day,month,year) {
    var dteDate = new Date(year,month,day);

    return +day === dteDate.getDate()
        && +month === dteDate.getMonth()
        && +year === dteDate.getFullYear();
}
function formatDate(dteDate) {
    var day = dteDate.getDate(),
        month = dteDate.getMonth() + 1,
        year = dteDate.getFullYear();

    var formatted = (day < 10 ? "0" : "") + day + "/"
                  + (month < 10 ? "0" : "") + month + "/"
                  + year;
    return formatted;
}

answered May 1, 2013 at 18:53

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:18:56Z

1

At least for the four-digit-year problem, look at this jfiddle output and the code:

d1 = new Date(1,2,3);
d2 = d1.getFullYear();
d3 = d1.getMonth();
d4 = d1.getDay();
alert(d2);
alert(d3);
alert(d4);

The Date constructor is not strict about four year digits (despite what Mozilla says you should do). In the example above, it's even taking the int 1 as a year! That is reflecting in your program accepting years that aren't 4 characters in length.

Perhaps test the length of the year string?

As for the split, perhaps you can use a regular expression that would both split and make sure that you're only accepting slashes (as suggested here)?

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered May 1, 2013 at 15:00

arturomp

29.8k11 gold badges48 silver badges74 bronze badges

3 Comments

arturomp Over a year ago

thanks @Bergi! my bad with the original ordering of the parameters.

Bergi Over a year ago

But you're still entering a 13th month? That's the reason why it alerts 14, btw.

arturomp Over a year ago

Thanks @Bergi! I've simplified it and clarified in the response, since the point is that the constructor isn't strict about the year it takes.

Collectives™ on Stack Overflow

Javascript date validation - year and full stops

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related