jQuery Age Verification plugin

In this article, we will understand the jQuery Age verification plugin with the help of various examples. In this, we will learn how to validate the age from the user in a form. We will create various examples of age verification such as: If your age is greater than 18 then we will eligible for vote etc.

Example 1

<! DOCTYPE html>    
<html>    	
    <head>    
<meta charset = "UTF-8">	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  jQuery Age Verification plugin </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<script src = ?https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js?> </script>
<style>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
h1 {
  color: red;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.8vw;
  letter-spacing: 5px;
font-family: 'Fjalla One', sans-serif;
  line-height: 1;
  margin: 0;
  text-align: center;
}
html {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
font-family: 'Fjalla One', sans-serif;
}
body {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
font-family: 'Fjalla One', sans-serif;
}
 span.title {
  color: Blue;
  font-size: 24px;
}
#ageWrapper {
  opacity: 1;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background-color: rgba(32,23,19,.7);
  transition: visibility 0s ease-in-out .5s, opacity .5s ease-in-out;
}
#ageWrapper.ageknown {
  visibility: visible;
  opacity: 1;
}
a {
  padding: 1px;
  text-decoration: none;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #fff;
-webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -ms-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    transition: All 0.5s ease;
}
a:hover {
  background-color: grey;
}
a:active {
  background-color: grey;
}
#agePopUp {
  position: fixed;
      border: 6px solid #ad2b1c;
  top: 50%;
  left: 50%;
  background-color: #fff;
  text-align: center;
  padding: 30px;
  width: 360px;
  height: 250px;
  margin-top: -105px;
  margin-left: -185px;
  box-sizing: border-box;
}
#agePopUp a {
  background-color: black;
  color: white;
  padding: 10px 20px;
  margin-top: 10px;
  display: inline-block;
}
.ageConfirmed {
  z-index: -1;
  visibility: hidden;
}
</style>
<body>
<h1> Example: Jquery Age Verification Plugin </h1>
<div id = "ageWrapper">
  <div id = "agePopUp">
    <h2>Are you over 18? </h2>
    <span class = "title"> you are eligible for vote </span>
    <a href = "#" id = "ageOkay"> Yes </a>
    <a href = "#" id = "ageBad"> No </a>
  </div>
</div>
<script>
$(document).ready(function() {
  $('#ageWrapper').prependTo($('body'));
  if (($.cookie('age')) !== 'true') { $('#ageWrapper').addClass('ageConfirmed'); }
    $('#ageOkay').click(function() {
    $.cookie('age', 'true', { expires: 1, path: '/' });
    $('#ageWrapper').removeClass('ageknown');
  });
});
</script>
</body>
</html>

Explanation:

In this above example, we created an example of age verification plugin with the help of jquery. In this, we have checked the age if the age is greater than 18 then you are eligible for vote otherwise we click on no button.

Output:

Following is the output of this example.

Example 2

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  jQuery Age Verification plugin </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<script src = ?https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js?> </script>
<script src = "http://cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"> </script>
<style>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
#modal_screen {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1100;
   rgb(92 72 72 / 80%);
}
    #modal_screen.nope {
        background-color: #7e6767;
    }
#modal_content {
    position: fixed;
    z-index: 1101;
    margin: 0 auto;
    background-color: #fff;
    border: 10px solid #4d4d56;
    width: auto;
    max-width: 290px;
    -webkit-border-radius: 80px;
    border-radius: 80px;
}
h1 {
  color: #d4a12c;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 2.3vw;
  letter-spacing: 5px;
font-family: 'Fjalla One', sans-serif;
  line-height: 1;
  margin: 10;
  text-align: center;
}
html {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
font-family: 'Fjalla One', sans-serif;
}
body {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
font-family: 'Fjalla One', sans-serif;
background: -webkit-gradient(linear, left top, left bottom, from(#FFD119), to(#E6B800));
	background: -moz-linear-gradient(top, #FFD119, #E6B800);
    font-weight: bold;
    height: 28px;
    box-shadow: 0 -8px inset;
}
h2 {
  color: skyblue;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.9vw;
  letter-spacing: 5px;
font-family: 'Fjalla One', sans-serif;
  line-height: 1;
  margin: 10;
  text-align: center;
}
    #modal_content .content_wrapper {
        padding: 5px;
        margin: 10 auto 0;
        text-align: center;
    }
    #modal_content h2 {
        font-size: 1.6em;
    }
    #modal_content p {
        font-size: 1em;
    }
    #modal_content div ul {
        padding: 0;
    }
    #modal_content div li {
        display: inline-flex;
        width: 48%;
        padding: 5px;
    }
    #modal_content a.button {
        width: 100px;
        margin: 10px auto;
        background: #0d9dae;
        color: #a6e1e8;
        text-decoration: none;
        -moz-transition: color .5s ease-in;
        -webkit-transition: color .5s ease-in;
        -o-transition: color .5s ease-in;
        -moz-transition: background .15s ease-in;
        -webkit-transition: background .15s ease-in;
        -o-transition: background .15s ease-in;
        border-radius: 40px;
    }
a {
  padding: 1px;
  text-decoration: none;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #fff;
-webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -ms-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    transition: All 0.5s ease;
}
* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-box-sizing: border-box;
}
    #modal_content a.notEligible {
        background: #c30;
        font-family: "Lucida Console", "Courier New", monospace;
    }
    #modal_content a.button:hover {
        background: #575760;
    }
</style>
<body>
<h1> Example Jquery Age Verification Plugin </h1>
<script>
var modal_content,
modal_screen;
$(document).ready(function () {
    av_legality_check();
});
$(window).resize(function () {
    av_positionPrompt();
});
av_legality_check = function () {
    if ($.cookie('is_legal') == "yes") {
    }
    else {
        av_showmodal();
    }
};
av_showmodal = function () {
    modal_screen = $('<div id="modal_screen"></div>');
    modal_content = $('<div id="modal_content" style="display:none"></div>');
    var modal_content_wrapper = $('<div id="modal_content_wrapper" class="content_wrapper"></div>');
    var modal_regret_wrapper = $('<div id="modal_regret_wrapper" class="content_wrapper" style="display:none;"></div>');
    var content_heading = $('<h2>Are You Eligible to Vote?</h2>');
    var content_text = $('<p>IF AGE IS GREATER THAN 18 THEN CLICK YES OTHERWISE NO </p>');
    var content_buttons = $('<div><ul><li><a href="#nothing" class="button" rel="yes">Yes</a></li><li><a href="#nothing" class="button notEligible" rel="no">No</a></li></nav>');
    var regret_heading = $('<h2>We\'re Sorry</h2>');
    var regret_text = $('<p class="caption">You must be 21 years old or a valid medical marijuana patient to enter this site.</p>');
    modal_content_wrapper.append(content_heading, content_text, content_buttons);
    modal_regret_wrapper.append(regret_heading, regret_text);
    modal_content.append(modal_content_wrapper, modal_regret_wrapper);
    $('body').append(modal_screen, modal_content);
    av_positionPrompt();
    modal_content.find('a.button').on('click', av_setCookie);
};
av_setCookie = function (e) {
    e.preventDefault();
    var is_legal = $(e.currentTarget).attr('rel');
    $.cookie('is_legal', is_legal, {
        expires: 30,
        path: '/'
    });
    if (is_legal == "yes") {
        av_closeModal();
        $(window).off('resize');

    }
    else {
        av_showRegret();
    }
};
av_closeModal = function () {
    modal_content.fadeOut();
    modal_screen.fadeOut();
};
av_showRegret = function () {
    modal_screen.addClass('nope');
    modal_content.find('#modal_content_wrapper').hide();
    modal_content.find('#modal_regret_wrapper').show();
};
av_positionPrompt = function () {
    var top = ($(window).outerHeight() - $('#modal_content').outerHeight()) / 2;
    var left = ($(window).outerWidth() - $('#modal_content').outerWidth()) / 2;
    if (modal_content !== undefined) {
        modal_content.css({
            'top': top,
            'left': left
        });
        if (modal_content.is(':hidden') && ($.cookie('is_legal') != "yes")) {
            modal_content.fadeIn('slow')
        }
    }
};
</script>
</body>
</html>

Explanation:

Output:

Following is the output of this example.

Example 3

<! DOCTYPE html>    
<html>    	
    <head>    
<meta charset="UTF-8">	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  jQuery Age Verification plugin </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<script src = ?https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js?> </script>
<style>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
.av-container {
  width: 100%;
  min-height: 500px;
  z-index: 999999;
  float: center;
  position: fixed;
  background: rgba(0, 0, 0, 0.2);
  justify-content: center;
  align-items: center;
  display: flex;
  background-size: cover;
}
body {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
font-family: 'Fjalla One', sans-serif;
background: -webkit-gradient(linear, left top, left bottom, from(#FFD119), to(#E6B800));
	background: -moz-linear-gradient(top, #FFD119, #E6B800);
    font-weight: bold;
    height: 28px;
    box-shadow: 0 -8px inset;
}
h2 {
  color: skyblue;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.9vw;
  letter-spacing: 5px;
font-family: 'Fjalla One', sans-serif;
  line-height: 1;
  margin: 10;
  text-align: center;
}

.av-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  height: 300px;
  width: 400px;
}
.av-content {
  text-align: center;
}
button {
    width: 100px;
    padding: 20px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    border: none;
  font-family: "Poppins", sans-serif;
}
.av-button {
  padding: 10px;
  background: #fff;
    color: black;
    border: 2px solid black;
    transition: background 400ms ease-out,
                color 400ms ease-out,
                border 400ms ease-out; 
}
button:hover {
    background: #1bbb85;
    color: #383b3a;
    border-radius: 5px; 
}
</style>
<body>
<div class="av-container" id="age-container">
  <div class="av-cell">
    <div class="av-content">
      <h1> Example </h1>
      <h2> Jquery Age Verification </h2>
      <p>Are you 21 years or older?</p>  
  <button class="av-button" id="leave">Leave</button>
       <button class="av-button" id="enter">Enter</button>
    </div>
  </div>
</div>
<div id="website" class="websiteZ" onload="ageVerification()">
  Hello,this is the content of website!
</div>
<script>
$(document).ready(function() {
    if(localStorage.getItem('popState') != 'shown'){
        $("#age-container").delay(2000).fadeIn();
        localStorage.setItem('popState','shown')
    }
      $('#enter').click(function(e) {
        $('#age-container').fadeOut(); // Now the pop up is hiden.
    });
    $('#leave').click(function(e) {
        alert("Sorry, you are not old enough to enter this site.");
        window.location = "https://www.google.com";
    });
});
</script>
</body>
</html>

Explanation:

In this above example, we created an example of age verification plugin with the help of jquery. In this, we have checked the age if the age is greater than 21 then you are eligible for viewing the website otherwise leave the webpage.

Output:

Following is the output of this example.