How to validate an input type=date field and display an error messages whether the field is empty or if it does not match the regex

Question

I have been trying for days to create a function that validates if the input type=Date is not empty and that the Date is formatted correctly. I want the following logic and actions:

1. If the field is empty, display an error message: "* is required"
2. If the field is formatted incorrectly meaning it does not meet this criterion: yyyy-mm-dd and 'mm' does not exceed 12 and 'dd' does not exceed 31 then display an error message "* invalid date"

Here is my code thus far:

HTML

<!-- Date of Birth -->
        <label for="dateOfBirth">Date of Birth</label>
        <span id="dateOfBirthErr" class="Error">*</span>
        <br>
        <input type="text" id="dateOfBirth" name="dateOfBirth" onfocus="(this.type='date')" 
            onblur="dateOfBirthValdiate()" placeholder="<?php echo date('Y-m-d'); ?>" max="9999-12-31" min="1800-01-01" />

JS

// Date of Birth Validation
function dateOfBirthValdiate () {
    let dateOfBirth = document.forms["registrationForm"]["dateOfBirth"];
    let dateOfBirthErr = document.getElementById("dateOfBirthErr");
    const dateFormat = /^\d{4}[\-\/\s]?((((0[13578])|(1[02]))[\-\/\s]?(([0-2][0-9])|(3[01])))|(((0[469])|(11))[\-\/\s]?(([0-2][0-9])|(30)))|(02[\-\/\s]?[0-2][0-9]))$/;

    if (dateOfBirth.value == "") {
        dateOfBirth.style.border = "2px solid red";
        dateOfBirthErr.innerHTML = "* is required";
    } else if (dateOfBirth.value.match(dateFormat)) {
        dateOfBirth.style.border = "1px solid #ccc";
        dateOfBirthErr.innerHTML = "*";
    } else {
        dateOfBirth.style.border = "2px solid red";
        dateOfBirthErr.innerHTML = "invalid date"


    }
}

I am new to RegEx so the issue be with my this code, however, when I test it in other code snippets it seems to work fine. I appreciate any help!

Answer 1

for starters I see that you are using input type=text but talking about input type=date.

So if you want to use input type=date change this:

<input type="text" id="dateOfBirth" name="dateOfBirth" onfocus="(this.type='date')" onblur="dateOfBirthValdiate()" placeholder="<?php echo date('Y-m-d'); ?>" max="9999-12-31" min="1800-01-01" />

to:

<input type="date" id="dateOfBirth" name="dateOfBirth" onfocus="(this.type='date')" onblur="dateOfBirthValdiate()" placeholder="<?php echo date('Y-m-d'); ?>" max="9999-12-31" min="1800-01-01" />

And you don't have to check if date if properly formatted.

Buuut if you want to use input text then here I created function to check if data is filled and correct:

HTML :

<form class="" action="index.html" method="post" id="form">
  <input type="date" name="" value="" id="date">
  <input type="text" name="" value="" id="dateText">
  <input type="submit" name="" value="">
</form>

JS:

function isDate(date) {
    return (new Date(date) !== "Invalid Date") && !isNaN(new Date(date));
}

document.getElementById('form').addEventListener("submit", e => {
  e.preventDefault();
  var date = document.getElementById('date');
  var dateText = document.getElementById('dateText');
  console.log("Date : " + date.value);
  console.log("dateText : " + dateText.value);
  if (date.value == "" || dateText.value == "") {
    console.log("* is required");
    e.preventDefault();
  } else {
    console.log("Dates filled.");
  }

  if (isDate(dateText.value) && !dateText.value.match("/^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/")) {
    console.log("* invalid date, required format yyyy-mm-dd");
    e.preventDefault();
  } else {
    console.log("Correct Date");
  }
})

If you want more then look here and choose your favorite solution.