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

Question

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

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

Answer 1

定义jquery验证程序规则时，应使用名称而不是要为其定义规则的元素的id 。 所以你的情况你的名字<textarea>是CriminalText而不是txtSomeField （显然，如果这是一个编辑器模板的名称可能是不同的，例如内部Foo.Bar[3].CriminalText ）。

因此，第一步是使用适当的名称：

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

现在让我们看第二步。 在选择器中，您使用了:checkbox ，我无法在您的DOM中看到任何地方。 我所看到的（至少在您在此处显示的内容中）是一个DropDownList和一个textarea。 因此，如果仅当用户在<select>列表中<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的unobtrusive库自动根据jQuery生成的HTML5 data- *属性编写jQuery.validate规则。帮助程序，从而完全弄乱了您的自定义规则设置。

Answer 2

这里的选择器是问题所在，使用input:checkbox用于复选框。 通常，jQuery倾向于使用CSS类名或ID。

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