Databases
StackOverflow2013
Postsdbo
POHow do I verify age using jQuery?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I verify age using jQuery?
    text
    copied!<p>I need to validate if the age for a alcohol website. And what I need is all here. I'm nearly there but I'm not sure is correct . Locally doesn't work. I need the <strong>validation</strong>, <strong>cookies</strong>, <strong>remind me</strong> field and <strong>DOB</strong></p> <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;/head&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function(){ //AV var container = $("#container"); var avContainer = $("#av-container"); var mcf = new mcFramework(container, avContainer); mcf.mcSetCallbackFunction(function() { document.cookie = "site=" + document.domain.replace(/\./, "") + "av; path=/"; if (window.location.href != 'page2.html') { window.location.href = 'page2.html'; } } ); function mcFramework(ContentContainer, AVContainer) { //global vars var _AVContent = 'You need to be of legal drinking age to continue.'; var _AVFailContent = 'You must be of legal drinking age (21 or older) to enter our site. You are being redirected to http://www.thecoolspot.gov/ - a place for teens to find info on alcohol and resisting peer pressure.'; var _ContentContainer = ContentContainer; var _AVContainer = AVContainer; var _CallbackFunction = ""; var _SiteCode = ""; // Set the tracking tag function which will fire on AV or AV Fail this.mcSetCallbackFunction = function(val) { _CallbackFunction = val }; this.mcSetSiteCode = function(val) { _SiteCode = val }; //add AV form to page avhtml = '&lt;div id="Form"&gt;' + '&lt;div id="mc_avcontent"&gt;' + _AVContent + '&lt;/div&gt;' + '&lt;div id="mc_averrors"&gt;&lt;/div&gt;' + '&lt;p class="inputs"&gt;' + '&lt;input type="text" id="mc_avday" name="mc_avday" value="DD" maxLength="2" tabindex="1" autocomplete="off" /&gt;' + '&lt;input type="text" id="mc_avmonth" name="mc_avmonth" value="MM" maxLength="2" tabindex="2" autocomplete="off" /&gt;' + '&lt;input type="text" id="mc_avyear" name="mc_avyear" value="YYYY" maxLength="4" tabindex="3" autocomplete="off" /&gt;' + '&lt;/p&gt;' + '&lt;p class="jqtransform remember"&gt;' + '&lt;input name="RememberMe" id="RememberMe" type="checkbox" class="jqtransform"&gt;' + '&lt;label for="RememberMe"&gt;Remember Me&lt;/label&gt;' + '&lt;/p&gt;' + '&lt;div id="submit" style="cursor:pointer;"&gt;submit&lt;/div&gt;' + '&lt;/div&gt;'; _AVContainer.append(avhtml); initForm(); function _AgeVerify(monthU, dayU, yearU) { var min_age = 21; /* change "age_form" to whatever your form has for a name="..." */ var year = parseInt(yearU); var month = parseInt(monthU) - 1; var day = parseInt(dayU); var theirDate = new Date((year + min_age), month, day); var today = new Date; if ( (today.getTime() - theirDate.getTime()) &lt; 0) { _ShowAVFail(); } else { _SetAVCookie(); _ShowContent(); } } function _ShowAVFail(callback) { avfailhtml = '&lt;div id="mc_avfail"&gt;' + _AVFailContent + '&lt;/div&gt;'; $("#mc_avform").html(avfailhtml); setTimeout('document.location.href="http://www.thecoolspot.gov"', 5000); if (_AVFailTag) { _AVFailTag(); } } function _ShowContent() { _AVContainer.hide(); _ContentContainer.show(); _SetAVCookie(); if (_CallbackFunction) { _CallbackFunction(); } } function initForm() { // Add form event listners $("#submit").click(_AVFormSubmit); $("#mc_avform").keyup(_AVFormAutoTab); $("#mc_avday").keydown(clearField); $("#mc_avmonth").keydown(clearField); $("#mc_avyear").keydown(clearField); // Set focus on month field $("#mc_avmonth").focus(); $("#mc_avmonth").select(); } function clearField() { if ($(this).val() == "MM" || $(this).val() == "DD" || $(this).val() == "YYYY") { $(this).val(""); } } // Handle auto tabbing function _AVFormAutoTab(e) { var srcElem = (window.event) ? e.srcElement : e.target; var day = $("#mc_avday").val(); var month = $("#mc_avmonth").val(); var year = $("#mc_avyear").val(); if (e.keyCode == 13) { _AVFormSubmit(); } else { switch (srcElem.id) { case "mc_avday": if (day.match(/^[0-9]{2}$/)) { $("#mc_avyear").focus(); $("#mc_avyear").select(); } break; case "mc_avmonth": if (month.match(/^[0-9]{2}$/)) { $("#mc_avday").focus(); $("#mc_avday").select(); } break; // case "mc_avyear": // if (year.match(/^[0-9]{4}$/)) { // $("#mc_avzip").focus(); // $("#mc_avzip").select(); // } default: result = 'unknown'; } } } // Submit AV form function _AVFormSubmit() { if (_AVFormValidate()) { var day = $("#mc_avday").val(); var month = $("#mc_avmonth").val(); var year = $("#mc_avyear").val(); _AgeVerify(month, day, year); } } // ====================== // = AV Form Validation = // ====================== // Validate the AV form function _AVFormValidate() { var day = $("#mc_avday"); var month = $("#mc_avmonth"); var year = $("#mc_avyear"); error_day = 'Please enter a valid day.'; error_month = 'Please enter a valid month.'; error_year = 'Please enter a valid year.'; error_date = 'Please enter a valid date.'; var av_errors = $('#mc_averrors'); if (!(_isNumeric(day.val()))) { av_errors.text(error_day); day.focus(); return false; } if (!(_isNumeric(month.val()))) { av_errors.text(error_month); month.focus(); return false; } if (!(_isNumeric(year.val()))) { av_errors.text(error_year); year.focus(); return false; } if (year.val().length &lt; 4) { av_errors.text(error_year); year.focus(); return false; } if (!_checkdate(month.val(), day.val(), year.val())) { av_errors.text(error_date); return false; } } // Check if a string is numeric function _isNumeric(str) { return /^\d+$/.test(str); } // Check if a string is a valid date function _checkdate(m, d, y) { var now = new Date(); // current date from clients system var yc = now.getYear(); // get current year if (yc &lt; 2000) yc = yc + 1900; // in case the year is &lt; 2000 var yl = yc - 120; // least year to consider var ym = yc; // most year to consider if (m &lt; 1 || m &gt; 12) return (false); if (d &lt; 1 || d &gt; 31) return (false); if (y &lt; yl || y &gt; ym) return (false); if (m == 4 || m == 6 || m == 9 || m == 11) if (d == 31) return (false); if (m == 2) { var b = parseInt(y / 4); if (isNaN(b)) return (false); if (d &gt; 29) return (false); if (d == 29 &amp;&amp; ((y / 4) != parseInt(y / 4))) return (false); } return (true); } } //Date helpers function checkleapyear(datea) { if (datea.getYear() % 4 == 0) { if (datea.getYear() % 10 != 0) { return true; } else { if (datea.getYear() % 400 == 0) return true; else return false; } } return false; } function DaysInMonth(Y, M) { with (new Date(Y, M, 1, 12)) { setDate(0); return getDate(); } } function datediff(date1, date2) { var y1 = date1.getFullYear(), m1 = date1.getMonth(), d1 = date1.getDate(), y2 = date2.getFullYear(), m2 = date2.getMonth(), d2 = date2.getDate(); if (d1 &lt; d2) { m1--; d1 += DaysInMonth(y2, m2); } if (m1 &lt; m2) { y1--; m1 += 12; } return [y1 - y2, m1 - m2, d1 - d2]; } function set_cookie(name, value, exp_d, path, domain, secure) { var cookie_string = name + "=" + escape(value); if (exp_d) { var exp = new Date(); //set new date object exp.setTime(exp.getTime() + (1000 * 60 * 60 * 24 * exp_d)); } if (path) cookie_string += "; path=" + escape(path); if (domain) cookie_string += "; domain=" + escape(domain); if (secure) cookie_string += "; secure"; document.cookie = cookie_string; } function SetBypassCookie(site) { var siteName = site + 'av'; //var zip = $("#mc_avzip").val(); set_cookie("site", siteName, 30, "/"); //set_cookie("zip", zip, 30, "/"); } }); &lt;/script&gt; &lt;body&gt; &lt;div id="av-container" class="content"&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload