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个月。

我已经尝试了各种各样的事情来实现这一目标，但没有太多运气。我还读到，validate插件忽略了选择，因此我根据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."; }
});

底部添加的逻辑将分析您在每个键盘上的表单＆＃39;并相应地设置变量。由于您的月份选择＆＃39;字段始终将月份值传递为两位数（即01表示1月，而不仅仅是1），或者以逗号分隔值（即01,02）表示，当选择多个月时，您可以将最小长度设置为5。两个月的选择加上逗号将它们分开。现在开始讨论这些变量。

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

rules: {

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

    }

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

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

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

1 个答案: