Question

我正在使用CheckBoxListFor助手 - http://www.codeproject.com/Articles/292050/CheckBoxList-For-A-missing-MVC-extension#AdvancedSettings

我的查看

中有以下内容

@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，但我假设这会在视图中生成的所有4个复选框中添加相同的id。所以我认为这是一个问题：

@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：

我添加了以下代码但没有成功，我点击其中一个复选框，取消选中它并显示没有错误。即使在提交表单后，复选框上仍然没有验证警告。

   $(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>

似乎有点奇怪的格式。

Answer 1

根据页面上可用的其他输入类型，您可以使用

之类的内容

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

修改：为了澄清（对我来说），如果这些是您当前页面上的唯一输入，那么我的代码就足够了。如果您有其他不需要此验证的复选框，则需要在选择器中更具体。

编辑2：让我们调用封装div divChkGroup。您的代码将如下所示：

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

希望这有帮助！

在CheckBoxListFor HTML Helper上进行JQuery验证

1 个答案: