5

设置：

  • 启用了客户端验证（+ 不显眼的 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. 用鼠标选择默认的空值（选择一个字母）。显示所需的消息。

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

谢谢！

4

1 回答 1

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 自定义验证方法问题的答案。

于 2012-12-28T05:02:25.257 回答