June 17, 2020

How to Validate Date in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to validate date in javascript. If you have some sort of form on your website which has a date input field, then you surely want to validate the date first on the client-side before submitting it to the server. This is a very important and necessary step to avoid storing any invalid data in your database.

To be on the safe side, you can also add date validation on the server-side. This will add an extra layer of protection to your database. Server-side date validation is outside the scope of this tutorial.

You can perform date validation using some sort of custom algorithm or you can use a third-party libraries such as Moment JS which has a lot of useful methods and one of them is the isValid() method.

The isValid() method returns a Boolean value and the arguments that you can pass to this method may vary so I suggest you to check the docs to learn more about it. In our case, we will pass three arguments; date string, date format, and a Boolean value.

In the following example, we have 3 input fields for month, date, and year. You can also set type as a date to have only one input field. Upon click of a button, we will validate the date and display a Boolean value on the screen. Please have a look over the code example and the steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, input, button, and h1). The div element is just a wrapper for the rest of the elements.
We have 3 input elements for the date, month, and year.

The button element has “Check” and the h1 element has “Result” as innerText.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have added a CDN link of minified Moment JS in the HTML using a script tag.

We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div>       
        <input type="text" placeholder="MM" id="month">
        <input type="text" placeholder="DD" id="date">
        <input type="text" placeholder="YYYY" id="year">
        <button>Check</button>
        <h1>Result</h1>    
    </div>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;    
}

input, button {
    display: inline-block;
    padding: 10px 20px;
}

#month, #date {
    width: 3%;
}

#year{
    width: 10%;
}

Javascript

We have selected the button element, all the input elements, and the h1 element using the document.querySelector() method and stored them in the btnCheck, inputMonth, inputDate, inputYear, and result variables respectively.

We have attached a click event listener to the button element.
In the event handler function, we are getting the values of all the input fields using the value property and storing them in the month, year, and date variables.
We are passing date string, date format, and Boolean value true to moment() method. The Boolean value true enables strict parsing which means the date string and date format should match. This method returns a Moment date object and this object contains the isValid() method.

We are calling the isValid() method which returns a Boolean value and we are displaying that in the h1 element using the innerText property.

let btnCheck = document.querySelector('button');
let inputMonth = document.querySelector('#month');
let inputDate = document.querySelector('#date');
let inputYear = document.querySelector('#year');
let result = document.querySelector('h1');


btnCheck.addEventListener('click', (event) => {
    let month = inputMonth.value;
    let year = inputYear.value;
    let date = inputDate.value;

    // true in the end, so that our date string and date format should match exactly - in moment js it is called Strict Parsing
    result.innerText = moment(`${month}/${date}/${year}`, 'MM/DD/YYYY', true).isValid();
});

You May Also Like: