All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Simple Date Validation In JavaScript

Last Updated : Mar 11, 2024

Simple Date Validation In JavaScript

In this tutorial we will show you the solution of simple date validation in JavaScript, here validation means we are going to check whether the date submitted by user or client is valid or not.

There are many ways with help of which we can apply validations on date. Let us discuss one from them below which is most preferred way.

Step By Step Guide On Simple Date Validation In JavaScript :-

Here, we already said that there are many ways like check validation of date using regular expressions or by using date.parse() function.

Today, here in this tutorial we are going to discuss date validation using regular expression, in next article we will understand our next concept which is done with understanding of date.parse() function.

Now, let us understand our regular expression concept with help of example given below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> JavaScript Validation </title>
  </head>
  <body>
<h1>
 TalkersCode – JavaScript Validation
</h1>
<h2>
 Simple date validation in JavaScript
</h2>
    <p id="result">
 </p>
    <script>
      var regex_here = /^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(0[1-9]|1[1-9]|2[1-9])$/;
        var dateForTest = "07/11/22"
        if (regex_here.test(dateForTest)) {
            document.getElementById("result").innerHTML = "Your provided date is in Valid Format";
        }
        else{
          document.getElementById("result").innerHTML = "Given date provided is in invalid format";
        }
    </script>
  </body>
</html>
  1. Here, above we show you an example in JavaScript.
  2. For this first of all we here create a basic structure of html. For this we use html, head, title and body with script tag. We hope you know about the basic structure of html and which html tag is used for which concept.
  3. Now, when we look inside body tag. Here, we see some headings tag and a script tag. Heading tag again is a concept of html, whereas script relates to JavaScript.
  4. JavaScript is written always inside script tag. Where script is a paired tag so it also has a closing tag. Now inside these script tag, we write our JavaScript code.
  5. Now, here as we see in above codes. First of all we create some headings tag. Then our main code starts, in which paragraph tag is created from html. Here, as we see that we did not use our paragraph for any other purpose, we only give here a class to it.
  6. At next, there is our script tag in which we write our JavaScript codes. Now, we already know that we are going to use Regular expression here. So, we store our codes of regular expressions and then use a predefind date that is store in a variable to check whether the date is valid or not.
  7. This all validation is done using if condition. If our date is valid then a line containing text Your provided date is in valid format is display otherwise if the condition get wrong which means if it is in invalid format then Given date provided is in invalid format is executed.

Conclusion :-

At last, in conclusion, here we can say that with the help of this article we are able to understand how to apply validation on date using JavaScript.

I hope this tutorial on simple date validation in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪