Question

我正在使用简单的结算信息表来收集信用卡信息。

我有两个选择输入：

<select class="form-control exp_month exp" id="expiration_month" name="expiration_month">
<select class="form-control exp_year exp" id="expiration_year" name="expiration_year">

我正在尝试单独的＆＃39; required＆＃39;字段的错误（即＆＃34;选择月份＆＃34;，＆＃34;选择年份＆＃34;），但是，当日期比今天更早时，我还需要有一个共享错误，所以如果是月份或年份已更新且用户只会看到一个更早的日期＆＃34;选择未来日期＆＃34;消息。

我使用了validator.addMethod（＆＃34; exp＆＃34;）和验证器errorPlacement，但似乎我所做的每一个修复都会破坏别的东西。

编辑：

jQuery.validator.addMethod("exp", function (value, element) {

    if ($('.exp_year').val() != "" && $('.exp_month').val() != "" && new Date($('.exp_year').val(), $('.exp_month').val()) < Date.now()) {
        $.validator.messages.exp = "Please select a future expiration date.";
        return false;
    }
    return true;
}, "Please select something.");


var validator = $("#new-card-form").first().validate({
    rules: {
        expiration_month: 'required',
        expiration_year: 'required'
    },
    groups: {
        //ExpirationDate: "expiration_month expiration_year"
    },
    messages: {
        expiration_month: 'Please select a month.',
        expiration_year: 'Please select a year.'
    },
    errorPlacement: function (error, element) {
        if (element.hasClass("exp")) {
            if ($(".exp_past").length == 0) {
                error.insertAfter(".exp_month");
                error.addClass("exp_past");
            }
            $(".exp").valid(); // used to remove error class from both dates

        }
        else
            error.insertAfter(element);
    }
});

Answer 1

您可以在每个字段上显示错误消息，并选择group messages from certain fields together。

AFAIK，无法有条件地将消息组合在一起。还没有提供动态切换.validate()选项的方法。

可能的解决方法是使用单个字段输入到期日期。您可以使用自定义方法来确保此单个字段的格式正确。

<强>顺便说一句：

$("#new-card-form").first().validate({ ...

当您的选择器定位到.first()时，id的使用完全是多余的。由于任何id始终是页面唯一的，因此它将是第一个，最后一个，也是唯一一个。如果您多次使用相同的id，则您的HTML无效，页面可能会被破坏。

jQuery验证单独的元素共享一个验证测试

1 个答案: