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>

what exactly is wrong - some error message, or form is (not) submitted when it should (not) be, or something else? please be as specific as possible — Aprillion, Jul 21 '18 at 07:48
Possible duplicate of [Compare two dates with JavaScript](https://stackoverflow.com/questions/492994/compare-two-dates-with-javascript) — Tigger, Jul 21 '18 at 07:57

score 1 · Answer 1 · answered Jul 21 '18 at 08:01

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

answered Jul 21 '18 at 08:01

D. Seah

4,472
1
12
20

Date objects can be compared by `<=` just fine. good idea simplifying `checkForm` but it's equal to the original code so not fixing any problem that could be there... – Aprillion Jul 21 '18 at 09:40

Aprillion · Accepted Answer · 2018-07-21T09:33:35.900

1

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() {
  ...

edited Jul 21 '18 at 09:33

answered Jul 21 '18 at 08:13

Aprillion

21,510
5
55
89

Thank you for the reply! The javascript code is indeed in another file, however, I currently have issues trying to follow your method as I am slightly confused on how I should write the javascript code, is it supposed to be `window.checkForm = function(){ var answ = validateDate(document.getElementById("doa").value); if(answ == false) { return false; } return true; }` – M. Meek Jul 21 '18 at 08:32
sure, that is the 1st option I suggested... though feel free to use `window.checkForm = function(){ return validateDate(document.getElementById("doa").value); }` combining advice from multiple answers – Aprillion Jul 21 '18 at 08:39
Hmm, I do not think the linking of the files are the issue now, I just tried to use your suggestions, and it still didn't work. I also then tried to use ' – M. Meek Jul 21 '18 at 09:26
works perfectly fine for me in http://jsfiddle.net/w1m6c7v0/7/ - you talk about "didn't work" without being specific what exactly is actually happening vs what you expect to happen... – Aprillion Jul 21 '18 at 09:32
sorry for not clarifying, when I stated that it "did not work", I meant that the function wasn't running properly, e.g when I put in 04-03-1990 for the form, the function was supposed to alert the user that they should not put in a date that is earlier than today – M. Meek Jul 21 '18 at 09:44
how to you `put` it for the form? do you use the date selector? if not, then the manual value might need to be in the `yyyy-mm-dd` format otherwise `new Date('04-03-1990')` is Invalid Date – Aprillion Jul 21 '18 at 09:49
I used '' which gave me the format of mm/dd/yyyy by default in the form – M. Meek Jul 21 '18 at 10:01
the thing displayed on screen is not the input's value - for Chrome see [Quick FAQs on input\[type=date\]](https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome) (it is similar in Firefox, no idea about other browsers) => how did you `put` it into the form? if by selecting a value from the date picker then I do not know what's wrong, but if you typed it manually then you typed it in the wrong format and it's an Invalid Date – Aprillion Jul 21 '18 at 10:16
Sorry! I just found the issue, it was with the tag and it works. – M. Meek Jul 21 '18 at 10:38

score 1 · Answer 3 · answered Jul 21 '18 at 08:18

1

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.

answered Jul 21 '18 at 08:18

Fillipos Christou

85
8

score 0 · Answer 4 · answered Jul 21 '18 at 08:23

0

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.

answered Jul 21 '18 at 08:23

Eixhani

60
8

the format of the JS `inputElement.value` is always a string `yyyy-mm-dd` in both Chrome and Firefox, they are not so cruel as to put the random user-locale format displayed on page as the actual value... – Aprillion Jul 21 '18 at 08:38

JavaScript date validation for HTML

4 Answers4