jQuery validate插件：如果任何特定条件无效，则重定向用户

Question

I am using 'jQuery Validate' plugin on a form which accepts birth-date as input from 3 separate fields for [month], [day] and [year]. I need to redirect the user to another url if his/her age is less than 21. I have looked for possible solutions over the internet and came up with a decision to handle the scenario with 'submitHandler' method of the plugin.

The new problem after adding submitHandler method along with my custom method, is that it has stopped validating other date ranges. Though it perfectly redirects the user when the age is calculated as less than 21.

My code is as follows:

$.validator.addMethod("ageGateValidBirthdate", function (value, element) {
    var month = parseInt($('.age-gate-month').val(), 10);
    var day = parseInt($('.age-gate-day').val(), 10);
    var year = parseInt($('.age-gate-year').val(), 10);
    var userdate = new Date(year, month - 1, day);
    var CurrentDate = new Date();
    var flag = null;
    var validDate = false;
    var userDateInSeconds = userdate.getTime();
    var currentDateCompareVar = new Date();
    currentDateCompareVar.setTime(userDateInSeconds);
    if (CurrentDate > userdate && currentDateCompareVar.getFullYear() === year && currentDateCompareVar.getMonth() + 1 === month && currentDateCompareVar.getDate() === day) {
        validDate = true;
    }
    if (validDate && year > 1900) {
        flag = true;
        $('.age-gate-month, .age-gate-day, .age-gate-year').removeClass('error');
    }
    else {
        flag = false;
    }
    return flag;

}, "Enter correct birthdate");

$ageGatePage.on('submit', function (e) {
    e.preventDefault();
    jQuery.validator.addClassRules({
        "age-gate-month": {
            required: true,
            number: true,
            minlength: 1,
            maxlength: 2,
            range: [1, 12],
            ageGateValidBirthdate: true
        },
        "age-gate-day": {
            required: true,
            number: true,
            minlength: 1,
            maxlength: 2,
            range: [1, 31],
            ageGateValidBirthdate: true
        },
        "age-gate-year": {
            required: true,
            number: true,
            minlength: 4,
            maxlength: 4
        }
    });
    $ageGatePage.valid();
});

$ageGatePage.validate({
    groups: {
        dob: "month_of_birth day_of_birth year_of_birth"
    },
    messages: {
        //messages here
    },
    errorPlacement: function (error, element) {
        error.appendTo(element.parents(".age-gate-birth-date"));
    },
    submitHandler: function (form) {
        var month = parseInt($('.age-gate-month').val(), 10); // Convert to numbers with "+" prefix
        var day = parseInt($('.age-gate-day').val(), 10);
        var year = parseInt($('.age-gate-year').val(), 10);
        if (!(month > 0 && month < 13 && year > 0 && year < 32768 && day > 0 && day <= (new Date(year, month, 0))))
            return false;
        var userdate = new Date(year, month - 1, day); // Use the proper constructor
        var CurrentDate = new Date();
        var flag = null;
        var age = Math.floor((CurrentDate - userdate) / (365.25 * 24 * 60 * 60 * 1000));
        var ageGateFlag = age >= 21 ? true : false;
        if (ageGateFlag) {
            flag = true;
            form.submit();
        }
        else {
            flag = false;
            window.location.href = "http://domain.com/";
            return flag;
        }
        return flag;
    }
});

Answer 1

I just got the issue, posting it here for further reference. It was the day validation inside the submitHandler which was creating the chaos. Changing the code in following manner did the trick.

if (!(month > 0 && month < 13 && year > 0 && year < 32768 && day > 0 && day <= (new Date(year, month, 0))))
   return false;

to

if (!(month > 0 && month < 13 && year > 0 && year < 32768 && day > 0 && day <= 31))
   return false;

Tried some workaround with invalidHandler with no luck. If someone could post a better answer, it'd be really appreciable.