上CheckBoxListFor HTML輔助做jQuery驗證

我使用CheckBoxListFor助手 - http://www.codeproject.com/Articles/292050/CheckBoxList-For-A-missing-MVC-extension#AdvancedSettings 上CheckBoxListFor HTML輔助做jQuery驗證

在我查看我有以下

@using MvcCheckBoxList.Model 
@model Web.Models.RegistrationViewModel 

<div> 
    @Html.Label("Check at least one box:") 
    <br /> 
         @Html.CheckBoxListFor(model=>model.agentTypeViewModel.PostedAgentTypes.AgentTypeId, 
          model=>model.agentTypeViewModel.AvailableAgentTypes, 
          agent=>agent.Id, 
          agent=>agent.Name, 
          model=>model.agentTypeViewModel.SelectedAgentTypes, 
          Position.Horizontal) 
    </div>

這只是正常;我能夠看到4個複選框，並且在檢查時會通過該複選框的索引爲我識別它們。

我只是想添加一些JQuery驗證，以便顯示錯誤，如果用戶不選擇任何一個這些複選框。

我可以添加一個id但我假設這會將相同的id添加到在視圖中生成的所有4個複選框。所以，我認爲這是一個問題：

@Html.CheckBoxListFor(model=>model.agentTypeViewModel.PostedAgentTypes.AgentTypeId, 
        model=>model.agentTypeViewModel.AvailableAgentTypes, 
        agent=>agent.Id, 
        agent=>agent.Name, 
        model=>model.agentTypeViewModel.SelectedAgentTypes, 
        Position.Horizontal, 
        x=> new {id="agentTypesCheckboxes"} 
       )

我在這裏的問題是，這將有可能只是做這方面的一些服務器端驗證通過DataAnnotations，以確保至少有一個被選中？或者是否會被推薦通過jQuery來做到這一點（正如我現在要做的那樣），它是如何做到的？

更新1：

我已經添加以下代碼，但沒有成功，我點擊checkboxs之一，取消它，它沒有顯示出錯誤。即使在提交表單後，仍然沒有對複選框的驗證警告。

$(document).ready(function() { 
     $('#btnSubmit').click(function(obj) { 
      var isValid = $("#RegistrationForm").valid(); 
      if (isValid) { 
       obj.preventDefault(); 
       $('#RegistrationForm').submit(); 
       return false; 
      } 
     }); 

     $.validator.addMethod("chkGroupSelection", function() { 
      return ($('#divChkGroup input[type="checkbox"]:checked').length != 0); 
     }, "Checkbox not selected."); 

     $('#RegistrationForm').validate({ 
      rules: { 
       divChkGroup: { chkGroupSelection: true } 
      }, 
      messages: { 
       divChkGroup: "Must check one" 
      }, 
      errorPlacement: function (error, element) { 
       error.appendTo(element.parent().next()); 
      } 
     }); 

    });

更新2

可能也是值得注意的，這是實際的HTML是什麼樣子的，我指的是一個複選框。

<input id="agentTypeViewModel_PostedAgentTypes_AgentTypeId4" type="checkbox" value="5" name="agentTypeViewModel.PostedAgentTypes.AgentTypeId"> 
<label for="agentTypeViewModel_PostedAgentTypes_AgentTypeId4">Item 5</label>

似乎有點怪異的格式。

來源

2014-04-03 Dayan

根據什麼其他的輸入類型中提供的頁面上，你可以使用像

if ($('input[type="checkbox"]:checked').length == 0){ 
    //fail validation 
}

編輯：爲了澄清（爲自己），如果這些是你的當前頁面上唯一投入，那麼我的片段就足夠了。如果您有其他不需要此驗證的複選框，您將希望在選擇器中更具體。

編輯2：讓我們調用封裝div divChkGroup。您的代碼將如下所示：

if ($('#divChkGroup input[type="checkbox"]:checked').length == 0){ 
    //fail validation 
}

希望這有助於您！

來源

2014-04-03 21:51:10 smd

我有另一個複選框，不涉及這四個。也許封裝在一個div內的四個複選框，並給它一個ID會有所幫助？你如何以你的榜樣來做到這一點？ – Dayan

我已更新我的答案以解決您的疑慮！ :) – smd

檢查我更新的帖子，仍與此戰鬥。我在jQuery驗證中實現了你的代碼，但沒有成功。 – Dayan

上CheckBoxListFor HTML輔助做jQuery驗證

回答

相關問題