当文本框具有默认值时，MVC 3 不显眼的 javascript 验证答案

【问题标题】：MVC 3 unobtrusive javascript validation when textbox has a default value当文本框具有默认值时，MVC 3 不显眼的 javascript 验证
【发布时间】：2011-07-02 03:13:57
【问题描述】：

所以我有一个表单可以很好地与 MVC 3、DataAnnotations 和 Unobtrusive javascript 配合使用。但是，我想在我的输入字段上放置一个“水印”，例如，First Name 文本框默认填充一个“First Name”值。当用户单击它时，该值会消失，如果他们离开该字段而没有输入任何内容，“名字”会再次出现。另外，我已经实现了这个并且运行良好。

我的问题与我的视图模型的 FirstName 属性上的 [Required] 属性有关。如果用户提交表单，默认情况下该字段包含“名字”，因此它通过“必填”验证。

解决这个问题的最佳方法是什么...我正在考虑几个选项：

1) 在清除水印的不显眼的 JS 验证之前注入一些 jQuery 来触发，这样当验证触发时，那些具有默认值的字段是空白的。我不确定这是可能的。你能在不显眼的 JS 运行验证之前以某种方式注入一个函数吗？

2) 修改 [Required] 属性或创建一个新属性以接受默认值，然后比较它以查看它们是否匹配。这引发了一些问题，因为我现在在多个位置指定了默认值，一个在 UI 中，一个在代码中，感觉不对。

3) 创建一个新的“水印”属性，我用它来装饰一个属性，该属性指定该字段的默认值。创建一个新的 HTML 帮助程序（而不是 TextBoxFor）来查找此属性并向标记发出适当的属性。修改或创建一个新的 [Required] 属性，用于查找同一字段上是否存在 [Watermark]。这将“默认值”保留在一个地方并遵守 DRY 原则，但感觉就像我将 UI 元素放入代码中（水印纯粹是视觉的），而且对于应该是一个简单问题的解决方案也感觉过于复杂.

有什么想法吗？

【问题讨论】：

标签： c# jquery asp.net-mvc validation unobtrusive-javascript

【解决方案1】：

我可能会选择＃2，我认为您可以这样做，这样您就不需要多次指定默认值。此外，如果您想验证某个用户名是否未被占用，您可以使用远程验证，然后只需检查该名称是否已被占用或是否为默认名称，这样您就可以免费获得您想要的行为。

【讨论】：

【解决方案2】：

各有优缺点。我喜欢保留这个客户端并使用了以下内容。

使用 HTML5 placeholder attribute，对于支持它的浏览器，您不再需要这样做。

<input type="text" placeholder="First name" />

对于不支持的浏览器...

在每个页面上，我们都有一些针对不支持某些功能的浏览器的兼容性脚本。在这种情况下，需要一点 JavaScript 和 jQuery 来检测浏览器是否支持 placeholder 属性。如果不是，它将字段值设置为占位符值，设置样式并添加适当的焦点/模糊事件处理程序。焦点/模糊事件处理程序适当地设置字段值。

然后在您的客户端验证脚本上检查字段值是否不等于占位符值。

在您的情况下，这意味着修改您不显眼的 JS 验证以检查字段值不等于占位符值

【讨论】：