Как проверить поле ввода type = date и отобразить сообщения об ошибках, если поле пустое или не соответствует регулярному выражению

Question

Я несколько дней пытался создать функцию, которая проверяет, если тип ввода = Дата не пуст и что Дата отформатирована правильно. Мне нужны следующие логики c и действия:

1. Если поле пустое, отобразить сообщение об ошибке: «* обязательный»
2. Если поле отформатировано неправильно, означающее его не соответствует этому критерию: гггг-мм-дд и «мм» не превышает 12, а «дд» не превышает 31, затем отображается сообщение об ошибке «* недействительная дата»

Вот мой код на данный момент:

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"


    }
}

Я новичок в RegEx, поэтому проблема будет с моим этим кодом, однако, когда Я проверяю это в других фрагментах кода, кажется, работает нормально. Я ценю любую помощь!

Answer 1

для начала Я вижу, что вы используете input type=text, но говорите о input type=date.

Так что если вы хотите использовать input type=date, измените это:

<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" />

на:

<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" />

И вам не нужно проверять, правильно ли отформатирована дата.

Если вы хотите использовать input text, то здесь я создал функцию для проверки правильности заполнения и заполнения данных:

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

Если вы хотите больше, чем , посмотрите здесь и выберите ваше любимое решение.