Html5 sessionStorage Based Age Verification with jQuery - Age Check

Html5 sessionStorage Based Age Verification with jQuery - Age Check
File Size: 23.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Age Check is a simple jQuery plugin that creates a dialog popup with a birthday picker for age verification on page load.

It leverages cookies or HTML5 local storage & 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="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({

  // min age
  minAge: 21,

  // URL to redirect when successful
  redirectTo: '',

  // URL to redirect when failed
  redirectOnFail: '',

  // popup title
  title: 'Age Verification',

  // popup message
  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:',

  // a callback function called when successful
  success: null,

  // success message
  successMsg: {
    header: 'Success!',
    body: 'You are now being redirected back to the application...'
  },

  // fail message
  underAgeMsg: 'Sorry, you are not old enough to view this site...',

  // error message
  errorMsg: {
    invalidDay: 'Day is invalid or empty',
    invalidYear: 'Year is invalid or empty'
  }

  // sessionStorage, localStorage, or cookie
  storage: 'sessionStorage',

  // the number of days
  storageExpires: null
  
});  

Changelog:

2019-06-17

  • Modified storage methods to allow for cookie storage and optional expiry of cookies with storageExpires setting

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.