1

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

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

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

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

我创建了我的代码的小提琴：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 以更好地查看验证状态，更重要的是，当它在从选择中删除选项后无法验证时。

4

1 回答 1

3

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

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

$.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 上为您提交了一个问题。

于 2013-07-23T17:57:56.023 回答