带下拉菜单的 MVC3 条件 Jquery 验证答案

【问题标题】：MVC3 Conditional Jquery Validation w/ Dropdown带下拉菜单的 MVC3 条件 Jquery 验证
【发布时间】：2025-12-15 06:05:03
【问题描述】：

我一直在尝试进行一些 jquery 验证，其中仅在选中复选框时才验证文本字段或下拉列表。

这是我所拥有的：

@using (Ajax.BeginForm("SomeAction", "SomeController", new { id = Model.Id }, new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "somePanel", InsertionMode = InsertionMode.Replace }, new { @id = "testForm" }))
{
 @Html.DropDownListFor(x => Model.SelectedValue, Model.YesNoList, " ", new { @id ="drpYesNo" })
 @Html.TextAreaFor(x => x.CriminalText, new { @id = "txtSomeField" })

<input type="submit" value="Save" />
}

在javascript中我有这个：

<script type="text/javascript">
    jQuery.validator.messages.required = "";
    $("#testForm").validate(
    {
        rules: {
            txtSomeField: {
                required: function (element) {
                    return $("input:checkbox[name='drpYesNo']:checked").val() == 'Yes';
                }
            }
        }

    });

    $("#testForm").on("submit", function () {
        if (!$(this).valid()) {
            return false;
        }
    });
</script>

我正在关注一些在线示例，但似乎无法正常工作。任何帮助深表感谢。七月四日快乐！

【问题讨论】：

标签： jquery asp.net-mvc-3 jquery-validate

【解决方案1】：

在定义 jquery 验证器规则时，您应该使用 name 而不是要为其定义规则的元素的 id。因此，在您的情况下，<textarea> 的名称是 CriminalText 而不是 txtSomeField（显然，如果这是在编辑器模板中，名称可能会有所不同，例如 Foo.Bar[3].CriminalText）。

所以第一步是使用正确的名称：

rules: {
    CriminalText: {
        required: function (element) {
            ...
        }
    }
}

现在让我们看看第二步。在您的选择器中，您使用了一些 :checkbox，我在您的 DOM 中的任何地方都看不到。我所能看到的（至少在你在这里展示的）是一个 DropDownList 和一个 textarea。因此，如果您希望仅当用户在 <select> 列表中选择值 Yes 时才需要 <textarea>，那么您可以通过以下方式定义规则：

rules: {
    CriminalText: {
        required: function (element) {
            return $('#drpYesNo').val() == 'Yes';
        }
    }
}

这显然假设您选择了以下选项：

<select>
    <option value="Yes">Yes, of course</option>
    ...
</select>

最后一点：确保您没有将jquery.validate.unobtrusive.js 脚本包含到您的页面中，因为它将使用 Microsoft 的不显眼的库根据帮助程序生成的 HTML5 data-* 属性自动编写 jQuery.validate 规则从而完全打乱了您的自定义规则设置。

【讨论】：

@up：这个！我无法理解我的验证代码出了什么问题。这是来自 MS 的不显眼的脚本。 ://

【解决方案2】：

这里的选择器是问题所在，使用input:checkbox 是用于复选框。通常，jquery 更喜欢 css 类名或 id。

required: function (element) {
  return $("#drpYesNo").val() === 'Yes';
}

【讨论】：

drpYesNo 是而不是这仍然有效吗？
我被选择器“input:checkbox”甩了。