jQuery.validate 忽略了我的规则声明

Question

我有一个非常简单的联系表格，其中包含这样的字段：

<label>
    First Name<em>*</em>
    @Html.TextBox("txtFirstName", null, new { tabindex = "1"})
</label>

我希望这个字段是必需的，所以我添加了一些代码来准备文档：

$(function(){
    $("#contactForm").validate({
        rules: {
            txtFirstName: { required: true}
            /* also tried this */
            txtFirstName: "required"
        }
    });
});

但是，此时它不需要该字段。看起来很疯狂的是，如果我像这样添加“必需”类属性：

@Html.TextBox("txtFirstName", null, new { tabindex = "1", @class="required"})

它会验证，但我需要比仅仅需要更复杂的规则。我需要检查是否在选择列表中选择了某些选项，然后某些字段应该或不应该是必需的。

Answer 1

我怀疑您已将jquery.validate.unobtrusive.js 脚本添加到您的页面中。该脚本在表单上注册了自己的.validate 处理程序，这显然与您的冲突。 jquery.validate.unobtrusive.js 脚本用于当您有一个用数据注释修饰的视图模型来执行验证并且这些数据注释被转换为生成的输入字段上的 HTML5 data-* 属性时。然后，这些 HTML5 data-* 属性由jquery.validate.unobtrusive.js 脚本解释，该脚本在表单上注册了一个.validate 处理程序。

如果您想定义自己的验证规则并注册自定义 .validate 规则，您将必须手动进行（就像您所做的那样）并从此页面中删除内置不显眼验证脚本的任何痕迹。

当您在输入字段上添加class="required" 属性时验证起作用的原因是因为jquery.validate.unobtrusive.js 将其拾取并将其包含在它自己的规则中，当它通过注册.validate 方法来配置插件时表格。