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")

以下是查看问题的步骤：

使用鼠标，选择其中一个值（A，B，C）。
使用鼠标，选择默认值，空值，选择一个字母。 不显示所需的消息。
使用箭头键，选择其中一个值（A，B，C）。
使用箭头键，选择默认值，空值，选择一个字母。 这次显示所需的消息。
使用鼠标，选择其中一个值（A，B，C）。 必填邮件消失。
使用鼠标，选择默认值，空值，选择一个字母。 显示所需的消息。

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

谢谢！

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的答案。

如何在选择更改时显示不显眼的jQuery验证消息以用于下拉列表？

1 个答案: