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) {
            ...
        }
    }
}

现在让我们看看第二步。在您的选择器中，您使用了一些我在DOM中无法看到的:checkbox。我所能看到的（至少在你在这里展示的内容）是一个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的不显眼的库自动编写基于HTML5 data- *属性的jQuery.validate规则。助手，从而彻底弄乱你的自定义规则设置。

Answer 2

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

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

带/ Dropdown的MVC3条件Jquery验证

2 个答案: