jQuery validate插件：如果任何特定條件無效，則重定向用戶

Question

我在表格上使用“ jQuery Validate”插件，該表格接受出生日期作為來自[月]，[天]和[年]的3個單獨字段的輸入。 如果他/她的年齡小於21，我需要將用戶重定向到另一個URL。我已經在互聯網上尋找可能的解決方案，並想出了使用插件的'submitHandler'方法處理該場景的決定。

在與我的自定義方法一起添加了SubmitHandler方法之后，新的問題是它已停止驗證其他日期范圍。 盡管在計算年齡小於21歲時，它可以完美地重定向用戶。

我的代碼如下：

$.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

我剛收到問題，將其發布在此處以供進一步參考。 正是當天提交者內部的驗證造成了混亂。 按照以下方式更改代碼可以達到目的。

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

至

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

嘗試了一些無效的invalidHandler解決方法。 如果有人可以發布更好的答案，那將是非常可觀的。