Custom validate form on submit. Date placeholder.

by Andrew Maestro

HTML

<form class="form" action="">
  <input class="date" type="text" placeholder="Date">
  <input class="form-submit" type="submit" value="submit">
</form>

JavaScript

var form = document.querySelector('.form');
var date = document.querySelector('.date');
var submit = document.querySelector('.form-submit');

date.addEventListener('focus', function () {
  this.type = 'date';
});

function onlyMondays(event) {
  var day = new Date(event.target.value).getUTCDay();
  // Days in JS range from 0-6 where 0 is Sunday and 6 is Saturday

  if (day !== 1) {
    event.target.setCustomValidity('Mondays Only!');
  }
}

// See https://drupal.stackexchange.com/questions/271808/how-to-prevent-an-ajax-form-from-submitting
submit.addEventListener('click', function(event) {
	var day = new Date(date.value).getUTCDay();
  // Days in JS range from 0-6 where 0 is Sunday and 6 is Saturday

  if (day !== 1) {
    date.reportValidity();
    event.preventDefault();
  }
});

date.addEventListener('change', onlyMondays);