CODEWITHSUNDEEP
javascripthtml
M. Meek
M. Meek

Reputation: 33

JavaScript date validation for HTML

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>

Upvotes: 0

Views: 143

Answers (4)

Aprillion
Aprillion

Reputation: 22340

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

Upvotes: 1

Eixhani
Eixhani

Reputation: 60

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.

enter image description here

Upvotes: 0

Fillipos Christou
Fillipos Christou

Reputation: 95

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.

Upvotes: 1

D. Seah
D. Seah

Reputation: 4592

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

Upvotes: 1

Related Questions