Search code examples
jqueryhtmlcssdatetime-formatclient-side-validation

Validating Date in YYYY-MM-DD HH:MM format inside textbox ontype

I want to validate a textbox which needs to accept ony in the format Date in YYYY-MM-DD HH:MM using 

<!DOCTYPE html>
<html>
<body>

<form action="/action_page_post.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

<p>If you click submit, without filling out the text field,
your browser will display an error message.</p>

</body>
</html>

It should turn red or glow if something is other than said format.

enter image description here

Solution

  • This will test

    • pattern
    • valid date

    function isValid(str) {
  var isPattern = /^20[1-9][0-9]-[0-1][0-2]-[0-3][0-9] [0-2][0-4]:[0-5][0-9]$/.test(str);
  if (!isPattern) return false;
  var d = new Date(str);
  return (!isNaN(d));
}
window.onload=function() {
  document.querySelector("input[name=date]").onkeyup=function() {
    var val = this.value;
    this.className = isValid(val)?"":"glow"
  }
}
    .glow { background-color:pink }
    <form>
<input type="text" name="date" required>
  <input type="submit" value="Submit">
</form>