Check on every page to ensure user has validated as being over 18_问答_开发者

I'm working on a website (tobacco related) that requires all visitors to validate they are over 18 before they can view the site. I have a form in place that validates the age but I'm at a dead end. How can I use this to store a cookie that they've passed the test and do a check on all pages to see if this check has already been passed or not? Any suggestions and help would be hugely appreciated! Below is my validation form:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Validate</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script language="javascript">
        function checkAge()
        {
            var min_age = 18;

            var year = parseInt(document.forms["age_form"]["year"].value);
            var month = parseInt(document.forms["age_form"]["month"].value) - 1;
            var day = parseInt(document.forms["age_form"]["day"].value);

            var theirDate = new Date((year + min_age), month, day);
            var today = new Date;

            if ( (today.getTime() - theirDate.getTime()) < 0) {
                alert("You are too young to enter this site!");
                return false;
            }
            else {
                return true;
            }
        }
    </script>

</head>
<body>

<form action="index.html" name="age_form" method="get" id="age_form">
<select name="day" id="day">
  <option value="0" selected>DAY</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <opti开发者_Go百科on value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option>
  <option value="26">26</option>
  <option value="27">27</option>
  <option value="28">28</option>
  <option value="29">29</option>
  <option value="30">30</option>
  <option value="31">31</option>
</select>
<select name="month" id="month">
  <option value="0" selected>MONTH</option>
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">July</option>
  <option value="8">August</option>
  <option value="9">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12">December</option>
</select>
<select name="year" id="year">
  <option value="0" selected>YEAR</option>
  <option value="1920">1920</option>
  <option value="1921">1921</option>
  <option value="1922">1922</option>
  <option value="1923">1923</option>
  <option value="1924">1924</option>
  <option value="1925">1925</option>
  <option value="1926">1926</option>
  <option value="1927">1927</option>
  <option value="1928">1928</option>
  <option value="1929">1929</option>
  <option value="1930">1930</option>
  <option value="1931">1931</option>
  <option value="1932">1932</option>
  <option value="1933">1933</option>
  <option value="1934">1934</option>
  <option value="1935">1935</option>
  <option value="1936">1936</option>
  <option value="1937">1937</option>
  <option value="1938">1938</option>
  <option value="1939">1939</option>
  <option value="1940">1940</option>
  <option value="1941">1941</option>
  <option value="1942">1942</option>
  <option value="1943">1943</option>
  <option value="1944">1944</option>
  <option value="1945">1945</option>
  <option value="1946">1946</option>
  <option value="1947">1947</option>
  <option value="1948">1948</option>
  <option value="1949">1949</option>
  <option value="1950">1950</option>
  <option value="1951">1951</option>
  <option value="1952">1952</option>
  <option value="1953">1953</option>
  <option value="1954">1954</option>
  <option value="1955">1955</option>
  <option value="1956">1956</option>
  <option value="1957">1957</option>
  <option value="1958">1958</option>
  <option value="1959">1959</option>
  <option value="1960">1960</option>
  <option value="1961">1961</option>
  <option value="1962">1962</option>
  <option value="1963">1963</option>
  <option value="1964">1964</option>
  <option value="1965">1965</option>
  <option value="1966">1966</option>
  <option value="1967">1967</option>
  <option value="1968">1968</option>
  <option value="1969">1969</option>
  <option value="1970">1970</option>
  <option value="1971">1971</option>
  <option value="1972">1972</option>
  <option value="1973">1973</option>
  <option value="1974">1974</option>
  <option value="1975">1975</option>
  <option value="1976">1976</option>
  <option value="1977">1977</option>
  <option value="1978">1978</option>
  <option value="1979">1979</option>
  <option value="1980">1980</option>
  <option value="1981">1981</option>
  <option value="1982">1982</option>
  <option value="1983">1983</option>
  <option value="1984">1984</option>
  <option value="1985">1985</option>
  <option value="1986">1986</option>
  <option value="1987">1987</option>
  <option value="1988">1988</option>
  <option value="1989">1989</option>
  <option value="1990">1990</option>
  <option value="1991">1991</option>
  <option value="1992">1992</option>
  <option value="1993">1993</option>
  <option value="1994">1994</option>
  <option value="1995">1995</option>
  <option value="1996">1996</option>
  <option value="1997">1997</option>
  <option value="1998">1998</option>
  <option value="1999">1999</option>
</select>
</form>
</body>
</html>

If you want to do this all on the client side, you certainly can. Keep in mind that this will be easily circumventable, so you never want to implement actual security in javascript on the client, but for something silly to keep watchdog groups off your back, this will work.

I'm assuming you have the html file you pasted above saved as checkAge.html. Add the following to the <form> tag:

<form action="index.html" name="age_form" method="get" id="age_form" onSubmit="checkAge()">

This will execute the checkAge function when the form is submitted. If the person says they are over age 18, then the function returns true, and the form gets submitted, and index.html is loaded. If they say they are not 18, the function returns false, the alert popup is displayed, and the form is not submitted.

And modify your checkAge function so the last part looks like this:

        var ret;
        if ( (today.getTime() - theirDate.getTime()) < 0) {
            alert("You are too young to enter this site!");
            ret = false;
        }
        else {
            ret = true;
        }
        setCookie('ageCheck', ret, 1); // save the cookie for one day
        return ret;
    }

This adds the code to set the cookie, and then return true or false.

Also, you will need to add this function to make setting cookies easier:

function setCookie(c_name,value,expiredays) {
  var exdate=new Date();
  exdate.setDate(exdate.getDate()+expiredays);
  document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
}

This is just a helper function to make setting the cookie a little easier.

Then, on your content pages, you might do something like this:

<html>
<head>
  <title>My age-restricted content</title>
  <script>
    window.onload = function () {
      var ageCheck = getCookie('ageCheck');
      if ('true' == ageCheck) {
        document.getElementById('content').style.display = '';
      } else {
        window.location = '/checkAge.html';
      }
    }
    function getCookie(c_name)
    {
    if (document.cookie.length>0)
      {
      c_start=document.cookie.indexOf(c_name + "=");
      if (c_start!=-1)
        {
        c_start=c_start + c_name.length+1;
        c_end=document.cookie.indexOf(";",c_start);
        if (c_end==-1) c_end=document.cookie.length;
        return unescape(document.cookie.substring(c_start,c_end));
        }
      }
    return "";
    }

  </script>
  </head>
<body>
  <div id="content" style="display: none;">
    You can't see this unless you are old enough
  </div>
</body>
</html>

This makes the content of the page invisible by default. When the page loads, the javascript code will check to see if there is a cookie indicating the person is 18. If there is, then the page content is displayed. If there is no cookie, of there is a cookie saying the person is under 18, then they are redirected to the age check page.