Client side date of birth validation using Javascript

Question

I have 3 separate input fields for DOB. My validation would check for:

input pattern, the format should only accept dd/mm/yyyy
input values are within certain bounds
leap years

I have tried combining a solution I found online with my own code. When I try to validate the date the error message is displayed even if the data is correct. Does anyone have a solution for this?

http://jsfiddle.net/noemitotos/5t9wboaq/10/

$(".btn").on ('click', function() {
  // Combine date
  var day = $('#dob_day').val();
  var month = $('#dob_month').val();
  var year = $('#dob_year').val();
  var dateString = day + "/" + month + "/" + year;
  console.log(dateString);

  // First check for the pattern
  if (!/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/.test(dateString)) {
    console.log('false pattern');
    return false;
  }

  // Check the ranges of month and year
  if (year < 1911 || year > 2011 || month == 0 || month > 12) {
    console.log('incorrect month/year ranges');
    return false;
  }

  var monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

  // Adjust for leap years
  if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0))
    monthLength[1] = 29;

  // Check the range of the day
  return day > 0 && day <= monthLength[month - 1];
});

And my markup:

<input type="text" value="" placeholder="DD" name="customer[dob]" id="dob_day" class="large" /> /
<input type="text" value="" placeholder="MM" name="customer[dob]" id="dob_month" class="large" /> /
<input type="text" value="" placeholder="YYYY" name="customer[dob]" id="dob_year" class="large" />
<button class="btn" type="submit" value="">Validate</button>

Could you give some examples of data it's failing with? I've entered a few random dates and they all passed, in fact, even invalid dates appear to be passing (Also, why are you building a date string and then separating it out again? You already have each component separately) — DBS, Nov 23 '17 at 11:37
@DBS Try `31-11-2017` ... it passes, when there is no 31st day of November. Actually, this is a big ugly job IMHO. What about February 29th? The validation needs to know about leap years, etc. — Tim Biegeleisen, Nov 23 '17 at 11:40
@TimBiegeleisen Yep, everything appears to pass whether it should or not, but I've just noticed that in the fiddle it's returning before logging to the console, so I guess I'm just never seeing the errors. — DBS, Nov 23 '17 at 11:43
I'm recreating a solution offered here: https://stackoverflow.com/questions/6177975/how-to-validate-date-with-format-mm-dd-yyyy-in-javascript — Norbert Girch, Nov 23 '17 at 11:44
I see no other way to check the pattern unless you are building a combined date string first... — Norbert Girch, Nov 23 '17 at 11:45
Is there a better solution for validating the dates? I'm looking for a client-side .js solution. — Norbert Girch, Nov 23 '17 at 11:47
For the pattern match, combining them is fine, but directly after that in the "Parse the date parts to integers" section, you're just working out the `day`, `month` and `year` vars you already have. — DBS, Nov 23 '17 at 11:47
@NaomiGirch There are other good answers in the link you provided. The solution you chose is IMHO the worst one there (manual date string parsing). Why don't you just use `moment.js` for this or, if you don't want to employ any third parties (which BTW you already did - JQuery), you could employ standard javascript `Date`. Both of these options are there. — jannis, Nov 23 '17 at 11:54

score 0 · Answer 1 · answered Nov 23 '17 at 12:00

I don't know why you want to do this you can do it another easier way.

var day = $('#dob_day').val();
var month = $('#dob_month').val();
var year = $('#dob_year').val();
var dateString = month + "/" + day + "/" + year;

then you can use Date function

if(new Date(dateString) != "Invalid Date"){
    here goes your other logic
}else{
    return false;
}

Client side date of birth validation using Javascript

1 Answers1