如何通过asp.net mvc中的自定义jQuery验证复选框列表

Question

我有一个复选框列表，我想在客户端使用 jQuery 验证但失败。我已经在我的项目中添加了不显眼的 jquery 验证插件。

型号代码为：

 [Required]
 public string name { get; set; }

 [SkillValidation(ErrorMessage = "Select at least 3 skills")]
 public List<CheckBox> skills { get; set; }

和其他模型是：

public class CheckBox
{
    //Value of checkbox 
    public int Value { get; set; }
    //description of checkbox 
    public string Text { get; set; }
    //whether the checkbox is selected or not
    public bool IsChecked { get; set; }
}

说明 - SkillValidation() 是我创建的用于进行服务器端验证的自定义属性。

SkillValidation 类代码是：

public class SkillValidation : ValidationAttribute
{
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        List<CheckBox> instance = value as List<CheckBox>;
        int count = instance == null ? 0 : (from p in instance
                                            where p.IsChecked == true
                                            select p).Count();
        if (count >= 3)
            return ValidationResult.Success;
        else
            return new ValidationResult(ErrorMessage);
    }
}

说明：此代码将验证用户在服务器端检查至少 3 个复选框。我没有从IClientValidatable接口继承这个类，因为我知道不可能从 MVC 方式（不显眼的方式）进行验证。

我的查看代码是：

@model demo.MVC.Models.CB
@{
    HtmlHelper.ClientValidationEnabled = true;
    HtmlHelper.UnobtrusiveJavaScriptEnabled = true;
}

@using (Html.BeginForm())
{
    <table>
        <tr>
            <td>
                @Html.LabelFor(model => model.name)
                @Html.EditorFor(model => model.name)
                @Html.ValidationMessageFor(model => model.name)
            </td>
            <td>
                @Html.LabelFor(model => model.skills)
                @Html.CheckBoxFor(m => m.skills[0].IsChecked, new { id = "csharpSkill" }) C#
                @Html.CheckBoxFor(m => m.skills[1].IsChecked, new { id = "aspSkill" }) ASP.NET
                @Html.CheckBoxFor(m => m.skills[2].IsChecked, new { id = "jquerySkill" }) jQuery
                @Html.CheckBoxFor(m => m.skills[3].IsChecked, new { id = "mvcSkill" }) ASP.NET MVC
                @Html.CheckBoxFor(m => m.skills[4].IsChecked, new { id = "razorSkill" }) Razor
                @Html.CheckBoxFor(m => m.skills[5].IsChecked, new { id = "htmlSkill" }) HTML
                @Html.ValidationMessageFor(model => model.skills)
            </td>
        </tr>
        <tr><td colspan="2"><button id="submitButton" type="submit">Submit</button></td></tr>
    </table>
}

@Scripts.Render("~/jQuery")
@Scripts.Render("~/jQueryValidate")
@Scripts.Render("~/Unobtrusive")

说明：在视图中，我为使用@Html.CheckBoxFor()创建的技能创建了名称文本框和 6 个复选框。

问题：问题是，如果我删除了 6 个复选框，那么客户端验证对于名称文本框效果很好。

如果我放置 6 个复选框并按下按钮，则只有服务器端验证适用于name 和 checkboxe。

我希望客户端验证也适用于 6 个复选框，以便用户必须至少选择 3 个复选框。

我怎样才能实现它？

谢谢

Answer 1

使用MVC的客户端验证（通过实现你不能做到这一点IClientValidatable，并使用jquery.validation.unobtrusive.js)，其原因是客户端验证规则应用于表单控件，而你没有（也不能）为您的表单控件skills属性，它是一个集合，不一个简单的值类型。

您需要编写自己的脚本来验证选中复选框的数量（如果无效，请使用由 @Html.ValidationMessageFor(model => model.skills)

为了模仿 jquery 的“懒惰”验证，首先处理.submit()事件，然后处理.click()复选框的事件。

修改您的第二个<td>元素以添加id用于选择复选框的属性（另请参见下面的注释）

<td id="skills">
    .... // your checkboxes

并添加以下脚本

var validateSkillsOnCheck = false; // for lazy validation
var requiredSkills = 3;
var skills = $('#skills input[type="checkbox"]');
var errorMessage = 'Select at least 3 skills';
var errorElement = $('span[data-valmsg-for="skills"]');

// function to validate the required number of skills
function validateSkills() {
    var selectedSkills = skills.filter(':checked').length;
    var isValid = selectedSkills > requiredSkills;
    if (!isValid) {
        errorElement.addClass('field-validation-error').removeClass('field-validation-valid').text(errorMessage);
    } else {
        errorElement.addClass('field-validation-valid').removeClass('field-validation-error').text('');
    }
    return (isValid);
}

$('form').submit(function () {
    validateSkillsOnCheck = true;
    if (!validateSkills()) {
        return false; // prevent submit
    }
});
$('#skills').on('click', 'input', function () {
    if (validateSkillsOnCheck) {
        validateSkills();
    }
})

一些旁注。

1. 表格用于表格数据，而不是布局，<table> 在您的情况下不适合使用元素。
2. 您@Html.LabelFor(model => model.skills)的不合适（您没有表单控件，skills因此单击它不会将焦点设置为任何内容）。那应该只是一个<span>@Html.DisplayNameFor(m =>m.skills)</span>或类似的元素。

3. 但是，您应该为每个复选框创建标签。您的模型有 3 个属性，包括TextandValue并且不清楚它们之间的区别，无论如何，您永远不会将它们包含在视图中。我假设您至少要提交Value财产，以便您知道选择了哪些技能

   <label>
       @Html.CheckBoxFor(m =>m.skills[i].IsChecked)
       <span>@Model.skills[i].Text</span>
   </label>
   @Html.HiddenFor(m =>m.skills[i].Value)