Is it possible to verify age on a date field in vanilla JavaScript?

Question

Is it possible to verify age on a date field in vanilla JavaScript?

How can I validate the age on a date input field? If someone is 18 or older, they will be valid. Otherwise, an error message should be displayed. Can you help me with this?

javascript date validation

Answer 1

Answer №1

This script takes a birthdate input and stores it in a constant variable called b18. It then adds 18 years to the birthdate and compares it with the current date to determine if the person is at least 18 years old.

// const b contains birth date to be tested
document.querySelector("input").addEventListener("input",function(){

 const b=new Date(this.value);

 const b18=new Date(b.getTime());
 b18.setYear(b.getFullYear()+18);

 // alternatively you could calculate that "critical birthdate", 
 // 18 years ago, that makes you an adult today:
 const d18=new Date();
 d18.setYear(d18.getFullYear()-18);

 console.log(new Date()>b18,d18>b);
})

<input type ="date" value="2003-08-29">

Answer 2

This script takes a birthdate input and stores it in a constant variable called b18. It then adds 18 years to the birthdate and compares it with the current date to determine if the person is at least 18 years old.

// const b contains birth date to be tested
document.querySelector("input").addEventListener("input",function(){

 const b=new Date(this.value);

 const b18=new Date(b.getTime());
 b18.setYear(b.getFullYear()+18);

 // alternatively you could calculate that "critical birthdate", 
 // 18 years ago, that makes you an adult today:
 const d18=new Date();
 d18.setYear(d18.getFullYear()-18);

 console.log(new Date()>b18,d18>b);
})

<input type ="date" value="2003-08-29">

Answer 3

Answer №2

Here is an example of how to achieve this:

        <input id="age" type="number" />


        let age = document.getElementById('age');
        let minAge = 21;

        age.onchange = () => {
            if(!age.value >= minAge){
                    age.style.border = "1px solid red";
                } else if(age.value >= minAge) {
                    age.style.border = "1px solid green";
                }
        }

Answer 4

Here is an example of how to achieve this:

        <input id="age" type="number" />


        let age = document.getElementById('age');
        let minAge = 21;

        age.onchange = () => {
            if(!age.value >= minAge){
                    age.style.border = "1px solid red";
                } else if(age.value >= minAge) {
                    age.style.border = "1px solid green";
                }
        }

Is it possible to verify age on a date field in vanilla JavaScript?

Answer №1

Answer №2

Similar questions

Cordova - Fixed elements flicker/blink when scrolling

Struggling to access specific data within a JSON object? Wondering how to extract and display data from a JSON object in VUE?

I am interested in rotating the yAxes scaleLabel in Angular using Chart.js

nodemon is launching an endless number of .node-xmlhttprequest-sync files

When I attempt to utilize the API, the JavaScript implementation of a <script src=...> element seems to interfere

Encountering an issue: The API call for /api/orders was resolved but no response was sent, potentially causing requests to become stuck in Next.js

Enhancing serialized form with additional information through an ajax request

I'm looking to leverage axios and useState-useEffect to collect data from numerous web pages. Any suggestions on how to do this efficiently

Conceal the rating of WordPress products when they have no ratings

What is the best way to eliminate an object from an array of objects depending on a certain condition?

The MUI Module is missing: Unable to locate '@emotion/react'

AngularJS scope variable not getting initialized inside promise

Update the current value in array.prototype

Is it feasible to utilize math.max with an array of objects?

Is there a way to transfer a variable from Angular 2 Frontend Express JS to an Angular 2 component?

Customize your file input with Bootstrap 4 using bs-custom-file-input and create a Symfony 5 collection with dynamic upload fields

Guide to retrieving a specific cookie value with socket.io

What is the best way to recover past messages from a channel?

How can we customize HTML images without allowing third-party JavaScript to enlarge them?

Controller unable to properly increment values