帶下拉菜單的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';
}