使用所选插件进行 jquery 验证答案

【问题标题】：jquery validation with chosen plugin使用所选插件进行 jquery 验证
【发布时间】：2014-08-26 14:35:22
【问题描述】：

我创建了一个选择元素，设置为允许多项选择，并将选择的插件与 optgroups 集成，如下所示：

<select id="attributes" name="data[attributes]" multiple>
 <optgroup label="Color" class="max_one">
   <option value="Black">Black</option>
   <option value="Yellow">Yellow<option>
   <option value="Red">Red</option>
 </optgroup>
 <optgroup label="Year">
   <option value="2006">2006</option>
   <option value="2007">2007</option>
   <option value="2008">2008</option>
 </optgroup>
 <optgroup label="Top Speed" class="max_one">
   <option value="120">120m/h</option>
   <option value="140">140m/h</option>
   <option value="160">160m/h</option>
 </optgroup>
</select>

显然，用户可以从每个 optgroup 中选择多个值。

我想为 jquery 验证添加一个方法，并确保使用 jquery 验证从每个具有类 .max_one 的 optgroup 中选择 至少且仅 1 个 选项.

我已经尝试过 require_from_group: [1, ".max_one"] 函数，但它只适用于普通复选框。

【问题讨论】：

从 GUI 的角度来看，IMO，这是一个非常糟糕的设计。这似乎很麻烦，因为如果无效，用户将不得不从头开始多次。
这取决于，它是一个非常大的表格，我试图避免将每个组拆分为单个选择下拉列表。结合选择的插件（自动完成搜索），这是一个公平的解决方案。
如果你想出了一个好的解决方案，可以肯定地说，它在成千上万个用 jQuery Validate 标记的 SO 问题中是独一无二的。

标签： jquery jquery-validate jquery-chosen

【解决方案1】：

@Sparky 说它超出了 jquery-validate 的功能，但也许这样的东西会对你有所帮助。

$('#attributes').on('change', function () {
    $('.max_one').each(function () {
        $('option').each(function () {
            if ($('option:selected').length == 1) {
                // Valid
            } else {
                // Invalid  
            }
        });
    });
});

【讨论】：

我正在考虑那种解决方案。必须有一种方法可以将其放入 jquery 验证中的自定义方法中。

【解决方案2】：

require_from_group 与复选框元素无关。它适用于输入元素的“组”。 input、select 或 textarea 是唯一有效的元素。

但是，在您的情况下，只有一个输入元素...单个select。由于 option 元素是 select 元素的子元素，因此它们不会自行验证。

换句话说，require_from_group 方法不会将option 或optgroup 元素识别为输入元素；只有父 select 作为单个输入。

【讨论】：

更正输入元素@Sparky。但是没有办法计算每个具有 .max_one 类的 optgroup 的选定选项？使用 addMethod() ?
@mallix，当然，算上它们，但是您正在插件范围之外进行验证。如果您正在寻找 jQuery Validate 解决方案，我认为这是不可能的。