多选需要至少 2 个选择并选择 jquery 并验证插件

Question

我有 2 个下拉菜单。第一个有“单月”和“多月”的选项。如果选择单月，则第二个下拉列表不可见，这是所需的行为。这是第一个选择：

<select name="catFrequency" class="cst-mar" id="catFrequency">
      <option value="0">single month only</option>
      <option value="1">multiple months</option>
</select>

如果第一个下拉菜单选择了“多个月”选项，则会出现第二个下拉菜单（已选择的多选），允许用户选择多个月：

 <select multiple name="monthSelect" id="monthSelect" value="Select Month">
   <option value='01'>January</option>
   <option value='02'>February</option>
   <option value='03'>March</option>
   <option value='04'>April</option>
   <option value='05'>May</option>
   <option value='06'>June</option>
   <option value='07'>July</option>
   <option value='08'>August</option>
   <option value='09'>September</option>
   <option value='10'>October</option>
   <option value='11'>November</option>
   <option value='12'>December</option>
</select>

我正在使用 jquery validate 插件，我想验证如果第一个下拉值 = 1（多个月），则需要从月份选择菜单中选择至少 2 个月。

我尝试了各种方法来实现这一点，但运气不佳。我还读到验证插件会忽略选择，因此我根据其他一些关于 SO 的问题将以下位添加到设置中。

ignore: "hidden:not(select)",

Here's the fiddle

编辑

好的，我要感谢 Jason Raines 为我指出正确方向的答案。我使用了他的答案的变体，并认为我会在这里发布它，以防它可以使其他人受益。

我使用validate.addMethod 创建了一个自定义方法。

jQuery.validator.addMethod("minTwoMonths", function(value, element) {
    if($('#catFrequency').val() == '1') {
        var monthSelected = value;
        if(!monthSelected) {
            monthSelected = 0;
        }
        if(monthSelected.length >= '2'){
            return true;
        } else {
            $('#submitCatEdit').addClass('button_disabled').attr('disabled', true);
            return false;
        }
    } else if($('#catFrequency').val() != '1') {
        return true;
    }
}, "You must select at least 2 months in order to use an irregular category.");

Answer 1

嗯，这可能不是绝对最好的方法，但它应该有效。

变化：

$('#editCatForm').bind('change keyup', function () {
    if ($(this).validate().checkForm()) {
        $('#submitCatEdit').removeClass('button_disabled').attr('disabled', false);
    } else {
        $('#submitCatEdit').addClass('button_disabled').attr('disabled', true);
    }
});

到

$('#editCatForm').bind('change keyup', function () {
    if ($(this).validate().checkForm()) {
        $('#submitCatEdit').removeClass('button_disabled').attr('disabled', false);
    } else {
        $('#submitCatEdit').addClass('button_disabled').attr('disabled', true);
    }
    if($('#catFrequency').val()=="1"){ var myVariable = 5; var myVariable2 = "You must select 2 or more months."; } else{ var myVariable = 2; var myVariable2 = "Please select at least one month."; }
});

底部添加的逻辑将在每个“keyup”上分析您的表单并相应地设置变量。由于您的“月选择”字段将月值始终为两个数字（即1月份的01，不仅是1），或者作为逗号分隔值（即01,02），因此在选择多个月时可以将最小长度设置为5。两个月的选择加上分隔它们的逗号。现在来看看如何处理这些变量。

我假设一旦提交表单，editCatSubmit() 函数将触发验证过程。 （我没有看到在小提琴中定义了 editCatSubmit() 的位置）无论哪种方式，将这段代码添加到您的 validate() 调用中：

rules: {

    "monthSelect": {
                        required : true,
                        minlength: myVariable
                    }
    },
messages: {
        "monthSelect": {
                        minlength: myVariable2
                    }  

    }

这将根据您的变量定义动态设置验证规则 - 我在第一部分中介绍过。我能想到的唯一一个你可能面临的问题是只需要回忆一下 validate()，因为它已经在 onLoad 中声明了。也许将它发布在一个函数中并调用它 onSubmit 或者只是在某个地方调用它。无论哪种方式，你都明白了。

再一次，我并不是说这绝对是最好的方法，但这是我想到的第一个方法。我希望它有所帮助。