0

我一直在尝试进行一些 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>

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

4

2 回答 2

2

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

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

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

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

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

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

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

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

于 2012-07-04T16:12:07.923 回答
1

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

required: function (element) {
  return $("#drpYesNo").val() === 'Yes';
}
于 2012-07-04T14:52:04.500 回答