Question

我已经研究和摔跤了好几天，所以最后当我在我的智慧结束时，我转向StackOverflow！这就是我想要完成的事情：

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

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

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

我创建了一个代码的小提琴：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);

}）;

更新：我向小提琴添加了一些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的演示验证没有使用空选项进行多项选择的智能事物：http://jsfiddle.net/ryleyb/utrcF/

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

切换选择使用JQuery Validate插件选择

1 个答案: