我想使用“@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>
因此，复选框按组应具有相同的名称。
这意味着在提交表单后将无法检索选择了哪些值，因为该名称用于通过在名称中添加索引属性来将 html 表单绑定(bind)到模型 ( http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx )。
有人知道或有解决方案来绕过此问题吗？
代码示例是:
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; }
}
在 View 中:
@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>
最后在家庭 Controller 中:
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");
}
谢谢!
最佳答案
我实现的解决方案:
- 在模型中添加一个额外的字符串属性(在我的示例中为强制类)，并带有“required”属性
- 将此属性显示为隐藏字段
- 在所有复选框上实现 onchange jquery 事件。在这种情况下，我会检查是否至少选中了一个复选框。
- 如果至少选中一个复选框，我将填充显示为隐藏字段的新属性的值。否则，我会删除此隐藏字段的值。
- 然后，我在隐藏字段上调用“valid”方法来自动显示或删除错误消息。
由于用于验证的字段是隐藏的(通过复选框组一个)，因此需要修改默认的 jquery 验证行为:
jQuery.validator.setDefaults({
ignore: ""
});
关于jquery - 至少选择一个复选框 - Asp.Net MVC - jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26596888/