如何在选择改变时显示不显眼的jQuery下拉验证消息

Question

设置:

• ASP。. NET MVC 4与客户端验证(+不显眼的javascript)启用。
jquery 1.8.2
• jquery。验证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自定义验证方法问题的回答