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

我想通过使用“@ Html.ValidationMessageFor”在客户端验证表单。它正确地为文本框工作。我在表单中也有一些复选框。我想用相同的方法来验证，每个组至少有一个复选框被选中。但是如果我没有弄错的jQuery验证插件使用复选框的名称如果选择至少一个知道的人（例如：http://jqueryvalidation.org/files/demo/radio-checkbox-select-demo.html）：至少选中一个复选框 - Asp.Net MVC - jQuery

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

Thx！

来源

2014-10-27 prorace

看来，顶部HTML片段是一个测试用例与普通的HTML ，不在'asp.net mvc'中。想知道你是否使用'Microsoft.jQuery.Unobtrusive.Validation'？ – 2014-10-28 01:46:53

开箱即可解决此问题。创建服务器端验证就足够简单了，但客户端验证需要创建自己的验证器，该验证器只适用于模型中的一个特定属性。只要处理'submit'事件并取消事件并显示一条消息（并处理所有“复选框”的更改事件以删除该消息）将会容易得多 – 2014-10-28 10:28:16

Venkaka，实际上我正在使用不显眼的验证。这个html代码片段就是为了显示jquery验证仅在复选框具有相同名称时才起作用。如果可以使用不同的复选框名称进行验证，我可以调整asp.net mvc来呈现正确的html。 – prorace 2014-10-28 20:11:37

我实现的解决方案：

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

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

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

来源

2014-10-28 20:30:22 prorace

请问您可以分享代码吗？ – 2017-12-21 09:30:48

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

回答

相关问题