We are doing AB testing. We can only touch the client side code with Google Optimize. So the designer asked us to change the birth date format from separated input to an unify input like this ->

So the idea is that the user type the birth date numbers [13.07.1998] and then the information will get to the separated input like this [13] [July] [1998]

It works fine until we use day 13. After that number the code does not work. But if I use 12 it works.

const dobInput = document.querySelector("input");
const birthDay = document.querySelector("#birthDay");
const birthMonth = document.querySelector("#birthMonth");
const birthYear = document.querySelector("#birthYear");

dobInput.addEventListener("change", (e) => {
  const dobString = e.target.value;

  if ( isValidDate(dobString) ) {

    let date = dobString.slice(0, 2);
    let month = dobString.slice(3, 5);
    let year = dobString.slice(6, 10);

    birthDay.value = date;
    birthMonth.value = month;
    birthYear.value = year;

  } else {

    const errorMessage = document.querySelector(".cro-error-text");
    errorMessage.classList.add('error');
    
  }
});

function isValidDate(dateString) {
  // First check for the pattern
  if (!/^\d{1,2}\.\d{1,2}\.\d{4}$/.test(dateString)) return false;

  // Parse the date parts to integers
  var parts = dateString.split(".");
  var day = parseInt(parts[1], 10);
  var month = parseInt(parts[0], 10);
  var year = parseInt(parts[2], 10);

  // Check the ranges of month and year
  if (year < 1905 || year > 2004 || month == 0 || month > 12) 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];
}

Does anyone knows why it could be happening? thanks!