Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Ask a Question
Welcome To Ask or Share your Answers For Others

Categories

forms - How do I verify age using jQuery?

0 votes
338 views
in Technique[技术] by (71.8m points)

forms - How do I verify age using jQuery?

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 validation, cookies, remind me field and DOB

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>

<script>
$(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 = '<div id="Form">'
               + '<div id="mc_avcontent">' + _AVContent + '</div>'
           + '<div id="mc_averrors"></div>'
               + '<p class="inputs">'
               + '<input type="text" id="mc_avday" name="mc_avday" value="DD" maxLength="2" tabindex="1" autocomplete="off" />'
               + '<input type="text" id="mc_avmonth" name="mc_avmonth" value="MM" maxLength="2" tabindex="2" autocomplete="off" />'
               + '<input type="text" id="mc_avyear" name="mc_avyear" value="YYYY" maxLength="4" tabindex="3" autocomplete="off" />'
               + '</p>'
               + '<p class="jqtransform remember">'
               + '<input name="RememberMe" id="RememberMe" type="checkbox" class="jqtransform">'
               + '<label for="RememberMe">Remember Me</label>'
               + '</p>'
               + '<div id="submit" style="cursor:pointer;">submit</div>'
               + '</div>';

    _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()) < 0) {
            _ShowAVFail();
        }
        else {
            _SetAVCookie();
            _ShowContent();
        }

    }

    function _ShowAVFail(callback) 
    {
        avfailhtml = '<div id="mc_avfail">' + _AVFailContent + '</div>';
        $("#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 < 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 < 2000) yc = yc + 1900; // in case the year is < 2000
        var yl = yc - 120; // least year to consider
        var ym = yc; // most year to consider

        if (m < 1 || m > 12) return (false);
        if (d < 1 || d > 31) return (false);
        if (y < yl || y > 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 > 29) return (false);
            if (d == 29 && ((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 < d2) {
        m1--;
        d1 += DaysInMonth(y2, m2);
    }
    if (m1 < 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, "/");

}
});
</script>
<body>

<div id="av-container" class="content">
</div>



</body>
</html>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

How about you just ask them - "Are you at least XX years old?" Asking for a birth date isn't more secure - if they'll want to lie, they'll enter a wrong date anyway.


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

2.1m questions

2.1m answers

60 comments

57.0k users

Most popular tags

Powered by Question2Answer
Donate
Theme by Q2A Market&&OStack.cn
...