切換選擇使用jQuery驗證插件

Question

我一直在研究和摔跤這幾天，所以最後我轉向StackOverflow當我在我的智慧'結束！這是我想要實現的：

當用戶切換單選按鈕時，它將啓用選擇選擇，如果他們選擇或不選擇，jQuery驗證將相應地工作 - 即：如果選擇選擇被禁用，jQuery Validate會忽略它，如果啓用，它會檢查是否選中了一個選項。如果用戶啓用了選擇選擇，但隨後決定刪除選項並且不通過單選按鈕切換選定選擇以禁用選項，我希望觸發驗證。

1. 首先，單擊「否」，使選上的選擇：

   到目前爲止，直到你執行以下步驟正常工作。點擊提交將觸發驗證按預期。

2. 接下來，將一個選項添加到選擇 - 現在表單驗證正確。
3. 然後，刪除選項 - 再次，驗證觸發器按預期。
4. 現在將單選按鈕切換到「是」 - 該字段將被禁用，但驗證錯誤消息不會消失（小問題）
5. 將收音機切換回「否」，不要選擇選擇的任何內容，並點擊提交 - 驗證不會再次觸發。此外，從這一點開始添加和刪除選項不會觸發驗證。

我已經創建了我的代碼小提琴：JSFiddle

任何幫助將不勝感激 - 我知道我接近，但不幸的是我的JQuery/JS技巧是不夠先進去看看問題在這裏。

HTML標記（請注意，我用引導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

問題是，按照您的步驟後，選擇插件會自動選擇空選項。通常情況下，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的演示驗證沒有用多個選項做空白選項的智能事物：http://jsfiddle.net/ryleyb/utrcF/

我已經爲您提交了關於jQuery Validate的issue。