无法使用 jQuery Validate 验证 Chosen select（不是不显眼的）

Question

我正在尝试在我的 ASP.NET MVC 4 应用程序中进行简单的 DropDownList 验证（清晰 jQuery - 不显眼）。

我在模型中有字段：

[DisplayName("Wybierz płatnika")]
public virtual int? studyPayerId { get; set; }
public virtual IList<StudyPayer> PayersList { get; set; }

然后在控制器中我做：

var payers = RisDbPersistanceManager.RetrieveEquals<StudyPayer>("IsActive", true); 
if (payers != null)
{
  model.PayersList = payers;  // it is populated                 
}
model.studyPayerId = null;

在我看来：

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>

...

$('#studyPayerId').rules('add',
{
    required: true,
    messages: {
        required: "Proszę wybrać płatnika!"
    }
});    
...
<div class="formsElement" >
  <div class="formsElementLabel" >
    @Html.LabelFor(x => x.studyPayerId)
  </div>
  <div class="formsElementInput" >
    @Html.DropDownListFor(x => x.studyPayerId, new SelectList(Model.PayersList, "Id", "Name", Model.studyPayerId), "-- wybierz płatnika --")
    @Html.ValidationMessageFor(x => x.studyPayerId)
  </div>
</div>

在简单的 TextBox 字段中，一切正常 - 在单击“提交”按钮时验证我的字段。但是当我没有选择任何东西并留下“--wybierzpłatnika--”选择时，DropDownList 不会显示任何消息。

编辑

  <select id="Gender" class="error" name="Gender" style="display: none;">
  <label class="error" for="Gender">Proszę wybrać płeć!</label>
  <div id="Gender_chosen" class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 127px;" title="">
    <a class="chosen-single" tabindex="-1">
    <span>-- nieokreślona --</span>
  <div>
  </a>
  <div class="chosen-drop" style="top: 34px; bottom: auto;">
</div>

Answer 1

这是 JavaScript，因此您需要向我们展示 RENDERED 和相关的 HTML 浏览器看到的代码，而不是你的模型、视图或控制器。由于我看不到你渲染的 HTML，我在下面的演示代码中使用了通用命名。
- 第一个 option 元素必须具有 value="" 属性。
- select 元素必须具有 name 属性，即使您不使用它也是如此。
我没有看到你对 .validate() 方法的调用。插件必须首先用 .validate() 方法初始化。没有它你不能使用 .rules() 方法。

jQuery:

$(document).ready(function () {

    $('#myform').validate(); // <- INITIALIZE plugin

    $('#studyPayerId').rules('add', {
        required: true,
        messages: {
            required: "Proszę wybrać płatnika!"
        }
    });

});

渲染HTML:

<form id="myform">
    <select name="myselect" id="studyPayerId">
        <option value="">-- wybierz płatnika --</option>
        <option value="1">option 1</option>
    </select>
    <br/>
    <input type="submit" />
</form>

工作演示：http://jsfiddle.net/nwLqdemu/

我不明白你为什么要使用 .rules() 方法。通常这仅在需要添加和删除规则时使用动态；或者当规则一次应用于整个元素组时，因为这太长而无法包含在 .validate() 方法中。

否则，您只需在初始化时在 .validate() 方法中声明规则...

$(document).ready(function () {

    // INITIALIZE plugin

    $('#myform').validate({ 
        rules: {
            myselect: {  // <- NAME attribute
                required: true
            }
        },
        messages: {
            myselect: {  // <- NAME attribute
                required: "Proszę wybrać płatnika!"
            }
        }
    });

});

工作演示 2：http://jsfiddle.net/nwLqdemu/1/

Please see the SO Tag Wiki page for a basic demo and hints on proper usage.

编辑:

由于您从未提到使用 "Chosen" 插件来创建下拉列表，所以没有人能回答这个问题。但是，由于 jQuery 验证插件默认忽略隐藏元素，您需要将 ignore 选项更改为 [] 以便 "ignore nothing" 并验证隐藏的元素已选.

无法使用 jQuery Validate 验证 Chosen select（不是不显眼的）

Cannot validate Chosen select with jQuery Validate (not unobtrusive)

jquery

jquery-validate

asp.net-mvc-4

jquery-chosen

编辑