Javascript 如何为使用jQuery呈现的UI元素设置不引人注目的验证

我有一个Razor视图，它使用HTML帮助程序呈现一些下拉列表，其他使用

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

 $('#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
            }
        }
    );

$（'filtersTable'）。数据表(
{
“iDisplayLength”：25，
“ajax”：{
“url”：“/CarJacks/Loaddata”，
“类型”：“获取”，
“数据类型”：“json”
},
“栏目”：[
{
“数据”：“IsSelected”，
“渲染”：函数（数据、类型、行）{
如果（类型==‘显示’）{
返回“”；
}
返回数据；
}
],
“rowCallback”：函数（行、数据）{
//为简洁起见，请删除
}
}
);

但是，当没有选中CarJackCheckBox时，我仍然没有得到任何客户端验证

虽然

（ModelState.IsValid）

返回false，

$（form）.valid（）

返回true，因此客户端没有错误

---

我缺少哪一部分？

在初始化jQuery DataTable之后，必须添加一行

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

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

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

---

您不能使用MVC的客户端验证，因为验证规则应用于表单控件，并且您没有（也不能）为

IEnumerable CarjackCheckBox

属性创建表单控件。您需要编写自己的脚本来验证至少需要一个复选框

从复选框中删除

data val-*

属性（因为它们是无意义的），并添加额外的类名，例如

carjacks

，以在脚本中用作jQuery选择器

然后包括以下脚本（注意这些模拟“惰性”验证-它首先在提交时进行验证，然后在单击复选框时进行验证）

---

你想要什么样的验证？你需要至少选中一个复选框吗？@StephenMuecke，是的。我正在设置，[Required]public IEnumerable carjackCheckBox{get；set；}，需要至少选中一个复选框，否则Model.IsVaid（）将始终失败..jquery.validate.unobtrusive.js不提供该功能。您需要编写自己的脚本OK，我看到了两个链接，其中他们正在检查选定项目的数组，然后验证长度，接下来就是。另外，请让我知道您可能知道的任何好链接..我模糊地记得回答过一年或两年前有一个类似的问题，但现在还找不到。如果我找到了，我会打电话给你，或者稍后添加答案。我只需要做一个更改。而不是var selectedCarJacks=carJacks.filter（':checked'）。length；我必须做var selectedCarJacks=$（'.carJacks'）。filter（':checked'））.length，否则它始终为零且无效。任何指针都可以说明为什么carJacks在函数外部不起作用，但errorMessage和errorElement可以正常工作。您的脚本是否位于文档末尾，即在关闭

标记之前？（否则您需要将其全部包装在

$（document）.ready（）

中）最好的猜测是在

$（“#filtersTable”）.DataTable（

脚本）之前就有了它，所以带有

class=“carjacks”

的复选框还没有创建。我也怀疑了这一点，并为创建顺序做了控制台日志。carjacks类正在首先初始化，所有脚本都在文档中准备就绪。$（函数（）{--all code here--}）；我只能假设

DataTable

脚本正在异步生成输入，并且在调用

var-carJacks=$（'.carJacks'）；

时，它们实际上没有被添加到DOM中

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

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

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