Toggle 使用 JQuery 验证插件选择选择

Question

这几天我一直在研究和解决这个问题，所以当我束手无策时，我终于求助于 StackOverflow！这是我想要完成的任务：

当用户切换单选按钮时，它会启用选择的选择，如果他们选择或不选择，jQuery Validate 会相应地工作 - 即：如果选择的选择被禁用，jQuery Validate 会忽略它，如果它是启用，它会检查是否选择了一个选项。如果用户启用了选择的选择，但随后决定删除一个选项并且没有通过单选按钮切换选择的选择以禁用它，我希望触发验证。

到目前为止，它工作正常，直到您执行以下步骤：

1. 首先，单击“否”以启用已选择的选择。点击提交将按预期触发验证。
2. 接下来，向选择添加一个选项 - 现在表单可以正确验证。
3. 然后，删除该选项 - 再次按预期触发验证。
4. 现在将单选按钮切换为“是” - 该字段将被禁用，但验证错误消息不会消失（小问题）
5. 将收音机切换回“否”，不要在选择的选项中选择任何内容，然后点击提交 - 验证不会再次触发。此外，从现在开始添加和删除选项将不会触发验证。

我已经创建了我的代码的 Fiddle：JSFiddle

任何帮助将不胜感激 - 我知道我很接近，但不幸的是我的 JQuery/JS 技能还不够先进，无法在这里看到问题。

HTML 标记（请注意我使用的是 Bootstrap 1.4.0）

<form name="documentAdmin" id="documentAdmin">
<div class="clearfix">
    <label for="SendToAll">Send To All:</label>
    <div class="input">
        <ul class="inputs-list">
            <li>
                <label>
                    <input name="SendToAll" id="SendToAll_Y" type="radio" value="Yes" checked> <span>Yes</span>

                </label>
            </li>
            <li>
                <label>
                    <input name="SendToAll" id="SendToAll_N" type="radio" value="No"> <span>No</span>

                </label>
            </li>
        </ul>
    </div>
</div>
<div class="clearfix">
    <label for="noticeSentTo">Workgroups:</label>
    <div class="input">
        <select name="noticeSentTo" class="span11" id="noticeSentTo" multiple data-placeholder="Select At Least One Workgroup" disabled>
            <option value=""></option>
            <option value="1">Option One</option>
            <option value="2">Option Two</option>
            <option value="3">Option Three</option>
        </select>
    </div>
</div>
<div class="actions">
    <button type="submit" class="btn success" name="SaveDocSet" value="SubmitSave" id="SubmitSave">Save And Preview</button>
</div>

这里是 JS：

$(document).ready(function () {
$("#noticeSentTo").chosen();
$("input[name=SendToAll]").click(function () {
    $("#noticeSentTo").removeAttr('disabled').trigger("liszt:updated").chosen().change(checkerrors).parents("div.clearfix").addClass('error').removeClass('success');
    if ($(this).attr("id") == "SendToAll_Y") {
        $("#noticeSentTo").val('').attr('disabled', 'disabled').trigger("liszt:updated").chosen().change(checkerrors).parents(".error").removeClass('error').addClass('success');
    }
});

var validator = $("#documentAdmin").validate({
    debug: true,
    errorClass: 'help-inline',
    validClass: 'success',
    errorElement: 'span',
    ignore: ':hidden:not(.chzn-done)',
    errorPlacement: function (error, element) {
        if (element.is(":hidden")) {
            element.next().parent().append(error);
        } else {
            error.insertAfter(element);
        }

    },
    highlight: function (element, errorClass, validClass) {
        $(element).parents("div.clearfix").addClass('error').removeClass('success');
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).parents(".error").removeClass('error').addClass('success');
    },
    rules: {
        noticeSentTo: {
            required: "#SendToAll_N:checked",
            minlength: 1
        }
    },
    messages: {
        noticeSentTo: {
            required: "If not sending to all Members, at least one Workgroup must be selected",
            minlength: jQuery.format("Enter at least {0} characters")
        }
    }
});
var checkerrors = function () {
    validator.form();
    console.log(validator.numberOfInvalids());
    validator.showErrors();
};
var chosen = $('#noticeSentTo').chosen().change(checkerrors);

});

更新：我向 Fiddle 添加了一些 CSS 以更好地查看验证状态，更重要的是，当从选择中删除选项后验证失败时。

Answer 1

问题在于，Chosen 插件在按照您的步骤操作后，会自动选择空选项。通常，jQuery Validate 足够聪明，可以判断这不是一个有效的选择，并且不会将其计入 minlength，但我想在多选的情况下，它并不是那么出色。

那么您需要的是一种更智能的验证方法：

$.validator.addMethod(
    "multipleSelectOptionsSelected",
  function (value, element, param) {
      if (this.optional(element)){
          return true;
      }

      var selectedOptions = 0;
      $('option:selected',element).each(function(){
          if (this.value != ''){
           selectedOptions++;   
          }
      });
      return selectedOptions >= param;
  },
    'Must be greater than {0}.');

然后在您的规则/消息中，引用新方法而不是 minlength：

   rules: {
        noticeSentTo: {
            required: "#SendToAll_N:checked",
            multipleSelectOptionsSelected: 1
        }
    },
    messages: {
        noticeSentTo: {
            required: "If not sending to all Members, at least one Workgroup must be selected",
            multipleSelectOptionsSelected: jQuery.format("Enter at least {0} characters")
        }
    }

工作示例：http://jsfiddle.net/ryleyb/r6YBU/4/

jQuery Validate 演示不使用空选项进行多项选择：http://jsfiddle.net/ryleyb/utrcF/

我已经在 jQuery Validate 上为您提交了issue。