选择更改时，如何为下拉列表显示不显眼的 jQuery 验证消息？

Question

设置：

• 启用了客户端验证（+ 不显眼的 javascript）的 ASP.NET MVC 4。
• jQuery 1.8.2
• jquery.validate 1.10.0
• jquery.validate.unobtrusive

html：

<form action="/" method="post">
    <select data-val="true" data-val-required="DropDown is required." id="DropDown" name="DropDown">
        <option value="">Select a letter</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span data-valmsg-for="DropDown" data-valmsg-replace="true"></span>
    <br/>
    <button type="submit">Submit</button>
</form>?

你可以在这里看到它的实际效果。

下拉菜单的服务器端代码非常无趣：

// View Model
public class ViewModel
{
    [Required]
    public string DropDown { get; set; }
}

// View
@Html.DropDownListFor(m => m.DropDown,
                      new SelectList(new[] { "A", "B", "C" }),
                      "Select a letter")

以下是查看问题的步骤：

1. 用鼠标选择其中一个值（A、B、C）。
2. 用鼠标选择默认的空值（选择一个字母）。不显示任何必需的消息。
3. 使用箭头键，选择其中一个值（A、B、C）。
4. 使用箭头键，选择默认的空值（选择一个字母）。这一次，将显示所需的消息。
5. 用鼠标选择其中一个值（A、B、C）。所需消息消失。
6. 用鼠标选择默认的空值（选择一个字母）。显示必需的消息。

在第一次触发验证之前，这些事件似乎不会为鼠标事件启动（通过使用键盘更改值或按下提交按钮）。关于为什么会发生这种情况的任何解释（我做错了什么？）或解决方法，将不胜感激。

谢谢！

Answer 1

我相信您需要对 JQuery Validate 进行两处修改。

1.) 添加一个方法将空字符串的第一个值定义为无效值

    $.validator.addMethod(
            "SelectLetter",
            function(value, element) {
                if ($("#DropDown").val() === ''){
                    return false;
                } else return true;
            },
            "Please Select a Letter"
    );
    var validator = $("#LetterForm").validate({
            rules: {
                    DropDown: {
                        SelectLetter: true
                    }
            }

    });

2.) 添加 click() 事件来触发验证

$("#DropDown").click(function(){
          $("#LetterForm").validate().element("#DropDown");
        });
});

完整示例http://jsfiddle.net/stupiddingo/L4c33/1/

可能有一个更简单的解决方案，但这似乎可行。这是基于之前询问的jQuery 自定义验证方法问题的答案。