如何为使用 jQuery 呈现的 UI 元素设置不显眼的验证

Question

我有一个 Razor 视图，它使用 HTML 帮助程序和其他使用 jQuery DataTable、

呈现一些下拉菜单

<div class="form-group">
            @Html.LabelFor(model => model.CarTyres, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-2">
                @Html.ListBoxFor(model => model.SelectedCarTyres, Model.CarTyres, htmlAttributes: new { @class = "selectpicker form-control", @multiple = "", @data_actions_box = "true" })
                @Html.ValidationMessageFor(model => model.SelectedCarTyres, "", new { @class = "text-danger" })

            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Drivers, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-2">
                @Html.ListBoxFor(model => model.SelectedDrivers, Model.Drivers, htmlAttributes: new { @class = "selectpicker form-control", @multiple = "", @data_actions_box = "true" })
                @Html.ValidationMessageFor(model => model.SelectedDrivers, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CarJacks, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-5">
                <table id="filtersTable">
                    <thead>
                        <tr>
                            <th>Select</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                </table>
            </div>
            @Html.ValidationMessageFor(model => model.CarJacksCheckBox, "", new { @class = "text-danger" })
        </div>

在我的模型中，我将 required 设置为 true，这样当我检查 Model.IsValid() 时，如果未设置任何这些项目，则 return false，并且工作正常。

  public class ReportViewModel
    {
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }


        [Required]
        public ICollection<int> SelectedCarTyres { get; set; }
        public IEnumerable<SelectListItem> CarTyres { get; set; }

        [Required]
        public ICollection<int> SelectedDrivers { get; set; }
        public IEnumerable<SelectListItem> Drivers { get; set; }


        public IEnumerable<CarJackViewModel> CarJacks { get; set; }

        [Required]
        public string SelectedSampleTime { get; set; }
        public IEnumerable<SelectListItem> SampleTimes { get; set; }



        [Required]
        public IEnumerable<int> CarJacksCheckBox { get; set; }


    }

为了使 javascrip 数据表成为必需的，我复制了复选框上的验证属性，如下所示：

 $('#filtersTable').DataTable(
        {
            "iDisplayLength": 25,
            "ajax": {
                "url": "/CarJacks/Loaddata",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                {
                    "data": "IsSelected",
                    "render": function (data, type, row) {
                        if (type === 'display') {
                            return '<input type="checkbox" name="CarJacksCheckBox" class="editor-active" data-val="true"  data-val-required="The CarJacks field is required.">';
                        }
                        return data;
                    }

            ],
            "rowCallback": function (row, data) {
                //Removed for Brevity
            }
        }
    );

But still , I am not getting any client side validation when none of the CarJackCheckBox are selected.

尽管 (ModelState.IsValid) 是 return 假的，$(form).valid() return 是真的，因此在客户端没有错误。

我缺少哪一块？

Answer 1

你必须在 jQuery DataTable 初始化后添加一行。

$.validator.unobtrusive.parse('form')

此外，您可以使用 jQuery 选择器

$.validator.unobtrusive.parse('#formTable')

Answer 2

您不能使用 MVC 的客户端验证，因为验证规则应用于表单控件，并且您没有（也不能）为您的 IEnumerable<int> CarJacksCheckBox 属性创建表单控件。您需要编写自己的脚本来验证至少需要一个复选框。

从复选框中删除 data-val-* 属性（因为它们毫无意义）并添加一个额外的 class 名称，比如 carjacks 在脚本中用作 jQuery选择器。

然后包括以下脚本（注意这些模仿 'lazy' 验证 - 它首先在提交时验证，然后在单击复选框时验证）

var validateOnClick = false; // for lazy validation
var requiredCarJacks = 1;
var carJacks= $('.carjacks');
var errorMessage = 'Select at least 1 car jack';
var errorElement = $('span[data-valmsg-for="CarJacksCheckBox"]');

function validateCarJacks() {
    var selectedCarJacks = carJacks.filter(':checked').length;
    var isValid = selectedCarJacks > requiredCarJacks ;
    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 () {
    if (!validateCarJacks()) {
        validateOnClick = true; // signal that we should now validate the .click() event
        return false; // prevent submit
    }
});

carJacks.click(function() {
    if (validateOnClick) {
        validateCarJacks();
    }
})

如何为使用 jQuery 呈现的 UI 元素设置不显眼的验证

How to set unobtrusive validation for UI elements rendered using jQuery

javascript

asp.net-mvc

jquery

razor

unobtrusive-validation