Multi-select 需要至少 2 select 离子，选择 jquery 并验证插件

Question

我有 2 个下拉菜单。第一个有 "single month" 和 "multiple months" 的选项。如果 select 编辑了单个月份，则第二个下拉列表不可见，这是所需的行为。这是第一个select：

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

如果第一个下拉菜单有 "multiple months" 选项 selected，第二个下拉菜单会出现（选择多 select），允许用户 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 验证插件，我想验证如果第一个下拉值 = 1（多个月），则需要至少 2 个月 selected月份 select 菜单。

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

ignore: "hidden:not(select)",

Here's the fiddle

编辑

好的，杰森·雷恩斯 (Jason Raines) 的回答为我指明了正确的方向，我对此表示赞赏。我使用了他的答案的变体，并认为我会在这里 post 它以防其他人受益。

我使用 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' 上分析您的表单并相应地设置变量。由于您的 'monthSelect' 字段始终将月份值传递为两位数（即 01 表示一月，而不仅仅是 1），或者作为逗号分隔值（即 01,02），您可以将最小长度设置为 5 多个月份时选择。两个月的选择加上分隔它们的逗号。现在介绍如何处理这些变量。

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

rules: {

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

    }

这将根据您定义的变量动态设置验证规则 - 我在第一部分中介绍了这一点。我能想到的唯一问题就是您可能会面临的唯一问题是必须回忆起 validate()，因为它已经在 onLoad 中说明了。也许 post 它在一个函数中并调用它 onSubmit 或只是沿线的某个地方回忆它。不管怎样，你明白了。

再说一次，我并不是说这是做到这一点的绝对最佳方式，但这是我想到的第一种方式。我希望它有所帮助。

Multi-select 需要至少 2 select 离子，选择 jquery 并验证插件

Multi-select requiring minimum 2 selections with jquery chosen and validate plugins

validation

jquery

jquery-chosen