JavaScript date validation for HTML

Question

I am currently trying to create a form on a website, where a person fills in a date before submitting the form. If the user inputs a date before today, it will not submit the form and give an alert stating "Date cannot be before today" .

However, I have run into an issue where my JavaScript algorithm is wrong and I can't find out what is causing the issue. The issue is: the date does not matter, and the user can input any date below 2020-01-01 from maxlength from the form (JavaScript does not work)

function checkForm() {
  var answ = validateDate(document.getElementById("doa").value);
  if (answ == false) {
    return false;
  }
  return true;
}

function validateDate(doa) {
  var d = new Date(doa);
  var n = new Date();
  if (d <= n) {
    alert("Date cannot be before today");
    return false;
  }
  return true;
}

My Form:

<form action="advertResult.html" onsubmit="return checkForm()">
  <label class="formText">First Name:</label>
  <input type="text" id="firstName" name="firstname" placeholder="" required>

  <label class="formText">Last Name:</label>
  <input type="text" id="lastName" name="lastname" placeholder="" required>

  <label for="commission" class="formText">Type of Commission</label>
  <select id="commission" name="commission" required>
    <option value="drawing">Art</option>
    <option value="video">Video</option>
  </select>

  <label for="doa" class="formText">Select a date for discussion</label>
  <input type="date" name="date" id="doa" max="2020-01-01" required>

  <input type="submit" value="Submit">
</form>

Answer 1

update your code to do the date check

function checkForm() {
  return validateDate(document.getElementById("doa").value);
}

function validateDate(doa) {
  var d = new Date(doa);
  var n = new Date();
  return (d.getFullYear() >= n.getFullYear()) &&
    (d.getMonth() >= n.getMonth()) &&
    (d.getDate() >= n.getDate());
}

Answer 2

the HTML code refers to the global function checkForm , while the JS code can be defined in a variety of ways

unless it is included by an old-schoold <script> tag (either directly in HTML or using src attribute), then it is possible that the way how JS is included (such as using webpack) might convert the functions to local functions, and no global checkForm will be defined

in that case, you can define a global function ( http://jsfiddle.net/w1m6c7v0/7/ ):

window.checkForm = function() {
  ...

or even better, add the event listener in JS ( http://jsfiddle.net/w1m6c7v0/6/ , though use an id attribute if you have more than 1 form):

document.querySelector('form').onsubmit = checkForm
function checkForm() {
  ...

Answer 3

You can make use of the moment.js library : https://momentjs.com/

if(moment(doa)).isBefore())
  return false;
return true;

If nothing is passed to moment#isBefore, it will default to the current time.

Answer 4

I tried the code and it looks good to me, maybe you are mistaking the format of the date which is MM/DD/YYYY , if I increase the DD it takes the user to advertResult.html?firstname=xxfirstnamexx&lastname=xxlastnamenamexx&commission=drawing&date=2018-07-22 meaning it works fine.