至少选择了一个复选框 - Asp.Net MVC - jQuery答案

【问题标题】：At least one checkbox selected - Asp.Net MVC - jQuery至少选择了一个复选框 - Asp.Net MVC - jQuery
【发布时间】：2014-12-23 04:22:17
【问题描述】：

我想使用“@Html.ValidationMessageFor”在客户端验证表单。它适用于文本框。我在表单中还有一些复选框。我想使用相同的方法来验证是否选中了至少一个按组的复选框。但如果我没记错的话，jquery 验证插件使用复选框的名称来知道是否至少选择了一个（例如：http://jqueryvalidation.org/files/demo/radio-checkbox-select-demo.html）：

<html>
    <head>
        <script src="http://jqueryvalidation.org/files/lib/jquery-1.11.1.js"></script>
        <script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"> </script>
        <script>
            $(document).ready(function() {
                $("#form1").validate({
                    rules:{
                        spamName: {
                            required: true,
                        },
                    },
                    messages:{
                        spamName:{
                        required: "This is my custom message",
                        },
                    }
                });
            });
        </script>
        <style>
            .block {
                display: block;
            }
            form.cmxform label.error {
                display: none;
            }
        </style>
        <title></title>
    </head>
    <body>
        <form class="cmxform" id="form1" method="get" action="">
            <fieldset>
                <legend>Spam</legend>
                <label for="spam_email">
                <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spamName" required>Spam via E-Mail
    </label>
                <label for="spam_phone">
                    <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spamName">Spam via Phone
    </label>
                <label for="spam_mail">
                    <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spamName">Spam via Mail
    </label>
                <label for="spamName" class="error">This field is required custom message.</label>
            </fieldset>
            <p>
                <input class="submit" type="submit" value="Submit">
            </p>
        </form>
    </body>
</html>

所以复选框应该按组具有相同的名称。

这意味着提交表单后将无法检索选择了哪些值，因为该名称用于通过在名称中添加索引属性（http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx）将html表单绑定到模型。

有人知道或有解决此问题的方法吗？

代码示例是：

public class Mandatory
{
    public Mandatory()
    {
        CheckboxItems = new List<CheckboxItem>();
    }

    public IList<CheckboxItem> CheckboxItems { get; set; }
}
public class CheckboxItem
{
    public bool CheckboxValue { get; set; }

    public string Name { get; set; } 
}

在视图中：

@model WebApplication20.Models.Mandatory
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    @Html.ValidationMessageFor(model => model.CheckboxItems)
    @Html.EditorFor(model => model.CheckboxItems)
    <input type="submit" value="Submit" id="submit">
}

使用的编辑器模板：

@model WebApplication20.Models.CheckboxItem
<div class="form_row">
    @Html.HiddenFor(x => x.Name, Model.Name)
    <label for="@Model.CheckboxValue"></label>
    <span class="content-checkbox">
        @Html.CheckBoxFor(x => x.CheckboxValue)
        @Html.LabelFor(x => x.CheckboxValue, Model.Name)
    </span>
</div>

最后在 homecontroller 中：

public ActionResult Index()
{
    var items = new Mandatory();
    items.CheckboxItems.Add(new CheckboxItem
    {
        CheckboxValue = true, 
        Name = "test 1",
    });

    items.CheckboxItems.Add(new CheckboxItem
    {
        CheckboxValue = false,
        Name = "test 2",
    });

    items.CheckboxItems.Add(new CheckboxItem
    {
        CheckboxValue = true,
        Name = "test 3",
    });

    return View(items);
}

[HttpPost]
public ActionResult Index(Mandatory test)
{
    return RedirectToAction("Index");
}

谢谢！

【问题讨论】：

看来，top HTML sn-p 是一个纯 html 的测试用例，不在asp.net mvc 内。想知道您是否使用Microsoft.jQuery.Unobtrusive.Validation？
没有什么开箱即用的方法可以解决这个问题。创建服务器端验证很容易，但客户端验证需要创建您自己的验证器，该验证器仅适用于模型中的一个特定属性。只处理submit事件会容易得多，如果没有选中则取消事件并显示消息（并处理所有checkboxes的更改事件以删除消息）
Venkaka，确实我正在使用不显眼的验证。 html sn-p 用于显示 jquery 验证仅在复选框具有相同名称时才有效。如果可以使用不同的复选框名称进行验证，我可以调整 asp.net mvc 以呈现正确的 html。

标签： jquery html asp.net asp.net-mvc checkbox

【解决方案1】：

我实现的解决方案：

在模型中添加一个额外的字符串属性（在我的示例中为强制类），带有“必需”属性
将此属性显示为隐藏字段
在所有复选框上实现 onchange jquery 事件。在这种情况下，我会检查是否至少选中了一个复选框。
如果至少选中了一个复选框，我将填充显示为隐藏字段的新属性的值。否则，我删除这个隐藏字段的值。
然后我在我的隐藏字段上调用“有效”方法来自动显示或删除错误消息。

由于用于验证的字段是隐藏的（由复选框组一个），需要修改默认的jquery验证行为：

jQuery.validator.setDefaults({
        ignore: ""
    });

【讨论】：