Question

我想通过使用“@ 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）中添加index属性将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>

最后在家庭控制器中：

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");
}

THX！

Answer 1

我实施的解决方案：

在模型中添加额外的字符串属性（在我的示例中为强制类），使用＆＃34; required＆＃34;属性
将此属性显示为隐藏字段
在所有复选框上实现onchange jquery事件。在这种情况下，我会检查是否至少选中了一个复选框。
如果选中至少一个复选框，则填写显示为隐藏字段的新属性的值。否则，我删除此隐藏字段的值。
然后我打电话给＆＃34;有效＆＃34;隐藏字段上的方法，用于自动显示或删除错误消息。

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

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

至少选中了一个复选框 - Asp.Net MVC - jQuery

1 个答案: