Html5 sessionStorage Based Age Verification with jQuery - Age Check

Html5 sessionStorage Based Age Verification with jQuery - Age Check

Age Check is a simple jQuery plugin that creates a dialog popup with a birthday picker for age verification on page load. It leverages HTML5's session storage API to store birthday & age data if user is verified.

See also:

How to use it:

1. Load jQuery library and the jQuery age check plugin's JS & CSS in your webpage.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="agecheck.css" rel="stylesheet">
<script src="jquery.agecheck.min.js"></script>

2. Initialization the plugin.

$.ageCheck({
  // OPTIONS HERE
});  

3. Available options for age verification.

$.ageCheck({
  minAge: 21,
  redirectTo: '',
  redirectOnFail: '',
  title: 'Age Verification',
  copy: 'This Website requires you to be [21] years or older to enter. Please enter your Date of Birth in the fields below in order to continue:',
  successMsg: {
    header: 'Success!',
    body: 'You are now being redirected back to the application...'
  },
  underAgeMsg: 'Sorry, you are not old enough to view this site...',
  errorMsg: {
    invalidDay: 'Day is invalid or empty',
    invalidYear: 'Year is invalid or empty'
  }
});  

Change log:

2017-12-15

2017-04-28

  • JS update.

2016-05-12

  • Added the option to redirect on fail

2015-03-14

  • fixed input width

This awesome jQuery plugin is developed by michaelsoriano. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 15.12.2017
  • Source