使用Javascript进行客户端出生日期验证

Question

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

1. input pattern, the format should only accept dd/mm/yyyy
2. input values are within certain bounds
3. 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>

Answer 1

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