Validate Date Of Birth And Set Age Limit In jQuery

by Zsanett Tamás

HTML

<label for="bday" class="bday col-12 col-lg-2 col-form-label">Születési idő: <img src="https://cdn1.iconfinder.com/data/icons/social-object-set-2-2/74/27-512.png" alt="Hibás mező" title="Nem múltál el 18!" class="error hide"></label>
<div class="col-12 col-lg-4">
  <input type="date" id="registration_birthday" required="required" placeholder="Kérjük, adja meg születési idejét!" class="form-control">

</div>

CSS

.hide {
  display: none;
}

.orange-text {
  color: orange;
}

img {
  width: 5%;
}

JavaScript

let regBirthDay = $('input[type="date"]');

function validateAge() {
  regBirthDay.on('change', function() {
    let age = 18;
    currentDate = new Date();
    currentDate = Date.parse($(this).val());
    let eighteenYearsAgo = new Date();
    eighteenYearsAgo.setFullYear(eighteenYearsAgo.getFullYear() - age);
    let remainder = currentDate - eighteenYearsAgo;
    if ((remainder) > 18) {
      $(".error").slideDown();
      $('.bday').addClass('orange-text');
      regBirthDay.addClass('orange-text');
    } else {
      $(".error").hide();
      $('.bday').removeClass('orange-text');
      regBirthDay.removeClass('orange-text');
    }
  });
}


$(document).ready(function() {
  validateAge();
});