jQuery validate插件:重定向用户,如果任何特定条件无效

jQuery validate plugin: redirect user if any particular condition is invalidated

本文关键字:如果 任何 特定条件 无效 用户 validate 插件 重定向 jQuery      更新时间:2023-09-26

我在一个表单上使用'jQuery验证'插件,它接受出生日期作为输入从3个独立的字段[月],[日]和[年]。我需要重定向用户到另一个url,如果他/她的年龄小于21。我在互联网上寻找可能的解决方案,并提出了一个决定,用插件的'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;
    }
});

我刚刚得到这个问题,把它贴在这里供进一步参考。是submitHandler中的验证造成了混乱。按照下面的方式修改代码可以达到目的。

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的解决方案,但没有成功。如果有人能给出一个更好的答案,我将不胜感激。

相关文章: