jquery - 当选择更改时，如何显示下拉菜单的不显眼的 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>​

您可以看到它的实际效果 here 。

下拉列表的服务器端代码非常无趣:

// 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 custom validation method issue 的答案之前问过。